Designing website user controls

ABSTRACT

A website construction tool allows website construction via an interactive graphical user interface (GUI) using containers and modules defining predetermined website constructs from a robust assortment of common and popular rendering formats and content source definition for individual webpages, and arranges the individual pages for navigation. A user selects from the predefined constructs by selecting modules for generating code, corresponding to the desired content, source and rendering format. Pointing device positioning locates the on-screen location by generating a container dedicated to the desired content. Webpage structure, or page flow, is generated by insertion of navigation controls and page insertions for navigating between pages in the deployed site, The predetermined constructs, therefore, provide templates of complex rendering formats allowing for content insertion without burdening the user with development of the constructs so rendered. Constructed websites may be hosted by the development entity, further relieving the user from website maintenance.

CROSS REFERENCE TO RELATED APPLICATIONS

This application claims priority under 35 U.S.C. §119(e) of U.S.Provisional Patent Application No. 61/589,205, filed Jan. 20, 2012,entitled “SYSTEMS, METHODS, AND COMPUTER PROGRAM PRODUCTS FOR WEBSITEAND ELECTRONIC DOCUMENT CONSTRUCTION,” incorporated herein by reference.

BACKGROUND

A “website” is a known Internet-accessible computer system that providescontent provided by a website creator and operator. This content is madeavailable to Internet users via known computer programs called“browsers” that run on a user's computer such as a laptop (ultrabook,netbook) computer, desktop computer, pad computer, smart phone, personaldigital assistant (PDA) (e.g. iPods), and the like. Websites providemany different forms of content to users such as textual information,images, videos, audio and sounds, and the like.

A website often contains components such as a header, a footer, a body,columns of textual information, sidebars, image carousels, animatedimages and many other types of components. These components in somecases are called “content containers” or “content items”, because theyserve as distinct regions in a website for holding and displayingspecific types of content, which is sometimes dynamically updated by acomputer system associated with the website. A website is often hostedon a remote computer system using a web hosting service, sometimesreferred to as “in the cloud.” The notion of the “cloud:” may be subjectto broad interpretation, however typically refers to practice of using anetwork of remote servers hosted on a public access network such as theInternet to store, manage, and process data, rather than the user'slocal system. Thus, cloud computing has been gaining popularity as abusiness practice of invoking computing resources that are delivered asa service over a network, typically on a fee-for-services basis, whichrelieves a user from the expense and effort of maintaining the computingresource. In the case of website hosting, this may refer to a computersystem that is accessed by users via an Internet connection, and thatthe computer system itself is operated by a third party separately fromthe website's creator, owner, or operator.

A number of business entities provide website construction and hostingservices. These services allow their customers (website owners) toaccess a cloud-based computer system, create a basic website, introducecontent into the website, and maintain the website so that it remainsactive and relevant to users of the website, typically consumers of somesort that are interested in (or in business cases, required to access) aparticular website. Known website construction services include thoseavailable at the website webs .com, which is owned by the assignee ofthe present application at the time of its filing.

Many known website construction services have certain limitations intheir convenience and ease of operation. Because of the complexity ofmany websites, extensive skills are often required in order to createand maintain a professional appearing website. In addition to aestheticskills such as design, color coordination, arrangement of elements, andthe like, skills are often needed in complex programming, scripting, andmark-up languages such as HTML (HyperText Markup Language), XML(Extensible Markup Language), HTML5 (a later 5^(th) revision), CSS(Cascading Style Sheets), Javascript and others known in the art. Due tosuch complexities, more user-friendly website construction sites, whichare websites themselves, have been provided by some entities.

Some of these more user-friendly website construction sites allow users(website creators or editors) to access a graphical user interface (GUI)for interactions with a hosting site, so as to select components for thewebsite, arrange the components in a pleasing manner, and introducespecific content into the components. A well-designed GUI for websiteconstruction would reduce or eliminate the need for complex programmingand aesthetic layout skills, so that more people having less capableskill sets can create and maintain impressive and professional-appearingwebsites.

SUMMARY

A website construction tool allows website construction via aninteractive graphical user interface using containers and modulesdefining predetermined website constructs from a robust assortment ofcommon and popular rendering formats and content source definition forindividual webpages, and arranges the individual pages according to apage structure for navigation. A novice user selects from the predefinedconstructs by selecting modules for generating code, or websiteinstructions, corresponding to the desired content, source and renderingformat. Pointing device positioning locates the on-screen location bygenerating a container dedicated to the desired content. Webpagestructure, or page flow, is generated by insertion of navigationcontrols and page insertions for navigating between pages in thedeployed site, The predetermined constructs, therefore, providetemplates of complex rendering formats allowing for content insertionwithout burdening the user with development of the constructs sorendered.

However, there are still a number of shortcomings with existing websiteconstruction sites, even those with more modern GUI type interfaces. Forexample, website creators often create multiple logically connectedpages within a website, and making connections between pages can becomplicated. It may be desirable to introduce (or repeat) content fromone web page on a website to another web page on the same website. Itmay be desirable to change the entire appearance of a website from oneaesthetic scheme or theme (having certain shapes, fonts, and colors) toan entirely different aesthetic scheme or theme, due to a need torebrand or update the appearance of a dated-looking website. It may bedesirable to provide a user interface that presents a number of websiteconstruction content items for inclusion in a website underconstruction, in a manner that facilitates the selection of anappropriate item for inclusion but does not interfere or obscure theuser's view of the website under construction.

Many of the foregoing shortcoming with existing website constructionsystems apply equally to systems for the creation and editing ofelectronic documents. After all, a website may be considered a form ofelectronic document that is not necessarily provided in a hard copy(printed) form. Some known electronic document assembly systems couldalso be improved in ease of use and user-friendliness.

There is a need to improve various aspects of GUI-type websiteconstruction sites and electronic document assembly systems so as toimprove the user-friendliness, speed of construction, and facilitationof changes when necessary. The various disclosed inventions(s) describedherein address a number of such improvements to website constructionsites or systems, as well as electronic document assembly systems.

Various aspects of improved user interface features for websiteconstruction systems and site are disclosed. Many of such improvedfeatures are also applicable to electronic document assembly systems.

One aspect of the present invention(s) relates to providing a bufferregion on a website builder display to indicate the “end” of a page onthe website, together with user controls in the form of selectable tilesthat dynamically retract (disappear) under certain circumstances toreveal area of the workspace of the website. These selectable tiles areused to indicate to the website construction system that a particularwebsite content item is to be inserted at a particular location in awebsite workspace region of a developmental website that is underconstruction by the user. According to this aspect, the size of thedevelopmental website dynamically enlarges to accommodate additionalcontent in response to user selection and movement of one of theselectable tiles into the developmental website, in the vicinity of thebuffer region. This allows the user to readily perceive that he or sheis at or near the end of the page, and to discern that the size of theweb page increases to accommodate any newly inserted content.

Various aspects of the invention(s) are provided in a system, whicheffects various computer-implemented processes or methods, includingprovision as an article of manufacture of a computer-readable mediumcontaining a computer program that effects various disclosed processes.In particular the disclosed aspects are for use by a computer user inconstruction of a website or electronic document. The disclosed systemprovides a developmental website or electronic document, a viewabledisplay region for viewing content items added to the website, and usercontrols for adding, editing, and manipulating the content items ofvarious types, e.g. images, text, videos, embellishments, etc. Variousdisclosed methods relate to particular aspects of a graphical userinterface for user controls, including an expandable website workspace,a retractable user control dock, selecting and manipulating contentitems such as images, text, etc., resizing of content withoutdistortion, providing selectable themes, updating content items inresponse to theme changes, dynamic updating of content from affiliatedcomputing operations, timer-based undo/redo functionality,autoadjustment of control items in a toolbar, content carouselmanagement and creation, and content-specific toolbars within contentitem containers.

In further detail, configurations herein provide novice websitedevelopers with capabilities for website construction by generating dataconstructs and computer readable instructions by providing visualediting tools for editing an on-screen image, including a workspace forrendering an edit document, the edit document responsive to editingmodules for modification according to an edit function performed by eachof the editing modules. Each of the editing modules is rendered as anediting icon displayed in an overlay in front of the workspace, and arendering area defined by a physical visual display surface includes theon-screen image, such that the rendering area displays at least aportion of the edit document. A buffer region adjacent to the editdocument on the workspace allows unimpeded viewing of the edit documentby occupying a background area behind the editing icons, the overlaysuch that none of the editing icons overlay the edit document on theworkspace.

In the website construction tool, the method for generating window basedcontent for insertion in the website includes receiving, from aplurality of modules corresponding to types of window based screenelements, a selection of a module for defining a container responsive toa type of the screen element, such that the type determines the datadisplayable in the screen element. A user positions the container byplacing the corresponding module on the screen, and specifies aselection of a source of the data for populating the container, thesource based on the type of the screen element. The website constructiontool activates a toolbar of content specific tool icons, in which thetool icons are based on the type for modifying the data from theselected source, each toolbar corresponding to a specific one of theplurality of modules.

In particular arrangements, website construction involving editing adigital video image is facilitated by identifying aspects (height,width, pixelation, horizontal to vertical ratio), such that the aspectsdefine translation of a raw image to the rendered image on the websiteunder construction. The user invokes an edit function for modifying atleast one of the aspects, and the edit function simultaneously performsa corresponding modification to aspects responsive to other editfunctions to maintain a proportional image, and renders the modifieddigital image such that the corresponding aspects maintain anundistorted appearance of the rendered digital image.

These and other aspects, features, and benefits of the claimedinvention(s) will become apparent from the following detailed writtendescription of the preferred embodiments and aspects taken inconjunction with the following drawings, although variations andmodifications thereto may be effected without departing from the spiritand scope of the novel concepts of the disclosure.

BRIEF DESCRIPTION OF THE DRAWINGS

The accompanying drawings illustrate one or more embodiments and/oraspects of the disclosure and, together with the written description,serve to explain the principles of the disclosure. Wherever possible,the same reference numbers are used throughout the drawings to refer tothe same or like elements of an embodiment, and wherein:

FIG. 1 is a block diagram illustrating components or elements of awebsite construction system that facilitates the construction andmaintenance of a website, in accordance with aspects of the presentdisclosure.

FIG. 2 is a block schematic diagram of a computer system and networkcomponents utilized to implement aspects of the present disclosure.

FIGS. 3A-3F show a hierarchical menu structure for website construction.

FIGS. 4-4E are screen depictions of a user interface of user controlmodules for a developmental website in accordance with aspects of thedisclosed invention(s).

FIG. 5, consisting of FIGS. 5A-5C, illustrate aspects of a retractabledock for control items.

FIG. 6, consisting of FIGS. 6A-6B, illustrate aspects of operation of ascrolling region for exposing additional space or a buffer region of adevelopmental website.

FIG. 7, consisting of FIGS. 7A-7B, illustrates further aspects of anexpandable workspace for a developmental website.

FIG. 8, consisting of FIGS. 8A-8, illustrates aspects of website contentcontainer type-specific toolbars associated with insertion of specifictypes of content into a developmental website.

FIG. 9, consisting of FIGS. 9A-9G, illustrates aspects of imagemanipulation in a developmental website.

FIG. 10, consisting of FIGS. 10A-10F, illustrates aspects of a contentcarousel for a developmental website.

FIG. 11, consisting of FIGS. 11A-11C, illustrates aspects of theaddition of website end user navigation controls and provision ofdifferent types of such controls to a developmental website.

FIG. 12, consisting of FIGS. 12A-12C, illustrates aspects of automaticresizing of content items from one content container when utilized ormoved to another content container in a developmental website.

FIG. 13, consisting of FIGS. 13A-13F, illustrates aspects of multiplelevels of undo and redo operations in a developmental website.

FIG. 14, consisting of FIGS. 14A-14E, illustrates aspects of the appfeed user control item and autoupdating website content from affiliatedcomputing processes.

FIG. 15, consisting of FIGS. 15A-15C, illustrates aspects ofmodification of a developmental website generated in a particularaesthetic theme, by change from a first theme to a second and differenttheme, and the automatic adjustment of the website under construction inresponse to such a theme change.

DETAILED DESCRIPTION Overview and Environment

From the outset, it will be understood that various embodiments of thepresent system, methods, and articles described herein are generallyimplemented as a special purpose or general-purpose computer includingvarious computer hardware as discussed in greater detail below.Embodiments within the scope of the present invention also includecomputer-readable media for carrying or having computer-executableinstructions or data structures stored thereon. Such computer-readablemedia can be any available media which can be accessed by a generalpurpose or special purpose computer, or downloadable throughcommunication networks. By way of example, and not limitation, suchcomputer-readable media can comprise physical storage media such as RAM,ROM, flash memory, EEPROM, CD-ROM, DVD, or other optical disk storage,magnetic disk storage or other magnetic storage devices, any type ofremovable non-volatile memories such as secure digital (SD), flashmemory, memory stick etc., or any other medium which can be used tocarry or store computer program code in the form of computer-executableinstructions or data structures and which can be accessed by a generalpurpose or special purpose computer, or a mobile device.

When information is transferred or provided over a network or anothercommunications connection (either hardwired, wireless, or a combinationof hardwired or wireless) to a computer, the computer properly views theconnection as a computer-readable medium. Thus, any such a connection isproperly termed and considered a computer-readable medium. Combinationsof the above should also be included within the scope ofcomputer-readable media. Computer-executable instructions comprise, forexample, instructions and data which cause a general purpose computer,special purpose computer, or special purpose processing device such as amobile device processor to perform one specific function or a group offunctions, for example, carry out computer-implemented method steps.

Those skilled in the art will understand the features and aspects of asuitable computing environment in which aspects of the invention may beimplemented. Although not required, the inventions are described in thegeneral context of computer executable instructions, such as programmodules or engines, as described earlier, being executed by computers innetworked environments. Such program modules are often reflected andillustrated by flow charts, sequence diagrams, exemplary screendisplays, and other techniques used by those skilled in the art tocommunicate how to make and use such computer program modules.Generally, program modules include routines, programs, objects,components, data structures, etc. that perform particular tasks orimplement particular abstract data types, within the computer.Computer-executable instructions, associated data structures, andprogram modules represent examples of the program code for executingsteps of the methods disclosed herein. The particular sequence of suchexecutable instructions or associated data structures represent examplesof corresponding acts for implementing the functions described in suchsteps.

Those skilled in the art will also appreciate that the invention may bepracticed in network computing environments with many types of computersystem configurations, including personal computers, hand-held devices,smartphones, multi-processor systems, microprocessor-based orprogrammable consumer electronics, networked PCs, minicomputers,mainframe computers, and the like. Many of the described invention(s)are practiced in distributed computing environments where tasks areperformed by local and remote processing devices that are linked (eitherby hardwired links, wireless links, or by a combination of hardwired orwireless links) through a communications network. In a distributedcomputing environment, program modules may be located in both local andremote memory storage devices.

An exemplary system for implementing the inventions, which is notillustrated, includes a general purpose computing device in the form ofa conventional computer, including a processing unit, a system memory,and a system bus that couples various system components including thesystem memory to the processing unit. The computer will typicallyinclude one or more magnetic hard disk drives (also called “data stores”or “data storage” or other names) for reading from and writing to. Thedrives and their associated computer-readable media provide nonvolatilestorage of computer-executable instructions, data structures, programmodules, and other data for the computer. Although the exemplaryenvironment described herein employs a magnetic hard disk, a removablemagnetic disk, removable optical disks, other types of computer readablemedia for storing data can be used, including magnetic cassettes, flashmemory cards, digital video disks (DVDs), Bernoulli cartridges, RAMs,ROMs, and the like.

Computer program code that implements most of the functionalitydescribed herein typically comprises one or more program modules may bestored on the hard disk or other storage medium. This program code, asis known to those skilled in the art, usually includes an operatingsystem, one or more application programs, other program modules, andprogram data. A user may enter commands and information into thecomputer through keyboard, pointing device, a script containing computerprogram code written in a scripting language or other input devices (notshown), such as a microphone, etc. These and other input devices areoften connected to the processing unit through known electrical,optical, or wireless connections.

The main computer that effects many aspects of the disclosed approachwill typically operate in a networked environment using logicalconnections to one or more remote computers or data sources, which aredescribed further below. Remote computers may be another personalcomputer, a server, a router, a network PC, a peer device or othercommon network node, and typically include many or all of the elementsdescribed above relative to the main computer system in which theconfigurations are embodied. The logical connections between computersinclude a local area network (LAN), a wide area network (WAN), andwireless LANs (WLAN) that are presented here for providing a networkingenvironment by way of example and not limitation. Such networkingenvironments are commonplace in office-wide or enterprisewide computernetworks, intranets and the Internet.

When used in a networking environment, the main computer systemimplementing server-based (or cloud-based) aspects is connected to thelocal network through a network interface or adapter. Typically, thecomputer may include a modem, a wireless link, or other means forestablishing communications over the wide area network, such as theInternet. In a networked environment, program modules depicted relativeto the computer, or portions thereof, may be stored in a remote memorystorage device. It will be appreciated that the network connectionsdescribed or shown are exemplary and other means of establishingcommunications over wide area networks or the Internet may be used.

In view of the foregoing detailed description of particular embodimentsof the present invention, it readily will be understood by those personsskilled in the art that the present invention is susceptible to broadutility and application. While various aspects have been described inthe context of a preferred embodiment, additional aspects, features, andmethodologies of the present invention will be readily discernable fromthe description herein, by those of ordinary skill in the art. Manyembodiments and adaptations of the present invention other than thoseherein described, as well as many variations, modifications, andequivalent arrangements and methodologies, will be apparent from orreasonably suggested by the present invention and the foregoingdescription thereof, without departing from the substance or scope ofthe present invention. Furthermore, any sequence(s) and/or temporalorder of steps of various processes described and claimed herein arethose considered to be the best mode contemplated for carrying out thepresent invention. It should also be understood that, although steps ofvarious processes may be shown and described as being in a preferredsequence or temporal order, the steps of any such processes are notlimited to being carried out in any particular sequence or order, absenta specific indication of such to achieve a particular intended result.In most cases, the steps of such processes may be carried out in avariety of different sequences and orders, while still falling withinthe scope of the present inventions. In addition, some steps may becarried out simultaneously.

Furthermore, it will be appreciated that systems and methods disclosedherein may be implemented in digital electronic circuitry, in computerhardware, firmware, software, or in combinations of them. Apparatus(systems) of the claimed invention can be implemented in a computerprogram product tangibly embodied in a machine-readable storage devicefor execution by a programmable processor. Method steps according to theclaimed invention can be performed by a programmable processor executinga program of instructions to perform functions (method steps) of theclaimed invention by operating based on input data, and by generatingoutput data. The claimed invention may be implemented in one or severalcomputer programs that are executable in a programmable system, whichincludes at least one programmable processor coupled to receive datafrom, and transmit data to, a storage system, at least one input device,and at least one output device, respectively. Computer programs may beimplemented in a high-level or object-oriented programming language,and/or in assembly or machine code. The language or code can be acompiled or interpreted language or code. Processors may include generaland special purpose microprocessors. A processor receives instructionsand data from memories. Storage devices suitable for tangibly embodyingcomputer program instructions and data include forms of non-volatilememory, including by way of example, semiconductor memory devices, suchas EPROM, EEPROM, and flash memory devices; magnetic disks such asinternal hard disks and removable disks; magneto-optical disks; andCompact Disk. Any of the foregoing can be supplemented by orincorporated in ASICs (Application-Specific Integrated Circuits).

Details of Website and/or Document Construction System, Methods andArticles

For the purpose of promoting an understanding of the principles of thepresent disclosure, reference will now be made to the embodimentsillustrated in the drawings and specific language will be used todescribe the same. It will, nevertheless, be understood that nolimitation of the scope of the disclosure is thereby intended; anyalterations and further modifications of the described or illustratedembodiments, and any further applications of the principles of thedisclosure as illustrated therein are contemplated as would normallyoccur to one skilled in the art to which the disclosure relates. Alllimitations of scope should be determined in accordance with and asexpressed in the claims.

Turning now to the drawings, in which like reference numerals andlegends indicate like elements throughout the several views, FIG. 1 is ablock schematic diagram illustrating a computing environment 100 inwhich is provided a website (or document) construction system, methods,and articles according to aspects of the disclosed inventions. Theenvironment is provided for purposes of user's computers 100 to create,edit, update, and access websites of a particular user, for example theuser of computer 110 a. For purposes of the discussion, the computer 110a will be considered the computer of the website (or document) creatorand/or editor, while the computers 110 b, 110 c are considered computersof other users who may wish to access and view the website or documentcreated via the user's computer 110 a.

For purposes of this disclosure, it will also be understood that theterm “website” herein can also mean an “electronic document,” in thesense that many of the functionalities described herein for creating,editing, and maintaining websites apply to systems for creating,editing, and maintaining electronic documents. In one particularapplication, electronic documents created in accordance with the aspectsof this disclosure can be printed into hard copy. It will nonetheless beunderstood that the primary aspects of this disclosure relate tocreation, editing, and maintaining websites and electronic documents forviewing and other forms of distribution such as printing.

Hereinafter, although the term “website” is primarily used, unless thecontext is such that the discussion and description can only apply to awebsite, we mean that the described aspects may also apply to electronicdocuments.

The website owner's computer 110 a accesses a website hosting andconstruction system (WHCS) 120 in order to create, edit, and/or maintaina website. The computer 110 a accesses the system 120 via the Internet20 in the known manner. Similarly, the other users' computers access thesystem 120 via the Internet. The WHCS 120 includes a websiteconstruction management module 122, a website hosting module 124, and,optionally, an associated computing function 125 such as a blog (“weblog”). In the illustration of FIG. 1, the associated computing function125 could be a blogging engine that is utilized by the user, forpurposes of independently creating blog content either for independentdissemination or for purposes, as considered herein, of incorporation ofsuch content into the website of the user.

The website hosting and construction system 120 further comprises a userinformation database 128 that is employed to store data associated withthe user's website, including identification data, content items, linksto content items stored in other computer systems, website templates,and other data items associated with website construction anddeployment.

Each of the primary website hosting and construction system components,i.e. website construction management module (logged-in server) 122, awebsite hosting module (site server) 124, and, optionally, an associatedcomputing function 125, are implemented as computer program modules thatoperate in the manner as described herein, and access and store data inthe user information database 128.

Also shown in FIG. 1 is a third party computing function or data source130. In certain applications, a user may desire to incorporate, embed,link to, associate with, invoke an application program interface (API),etc., some third party data source or computing function elsewhere onthe Internet. For example, the user may desire to include the content ofa blog that is not hosted on the system 120. Functionality of a thirdparty data source is independent of the associated computing function125, although the access mechanisms and methods for incorporation ofdata from both of such computing functions is technically similar. Forpurposes of this disclosure, it will be understood that other computingand/or data functions can be provided in a user's website eitherinternally to the system 120 or from an external source 130.

Still referring to FIG. 1, the website owner's computer 110 a is showndisplaying an exemplary simplified website under construction 140. Thiswebsite under construction may be referred to as a “developmentalwebsite”. The developmental website includes a developmental workspaceregion with which the user interacts to add content or edit previouslyadded content. The developmental website may comprise one or moreseparate “pages”, which are merely organizational techniques forseparating content into different areas or regions. For example, thedevelopmental website in FIG. 1 includes a first page 1 of N, as well asa second page 2 of N, and a third page 3 of N (where N can be any numberof additional pages). Each of the pages includes some content items.

As shown in FIG. 1, the website under construction or developmentalwebsite includes a number of different components, or containers 150-1 .. . 150-9, (150 generally) discussed further below, which can be ofvarious types and sizes and layout arrangements. For example, FIG. 1shows a title 150-1, a navigation controls area 150-2, a body 150-3, ablog column 150-4, a footer 150-5, an image 150-6, a sidebar 150-7, anadvertisement (ad)150-8, and a video 150-9. Only a limited number ofthese components or elements are typically viewed by the website ownerat one time. The containers 150 each define a particular renderablecontent item, and are the “building blocks” by which a user/developerconstructs the website, as will be discussed further below.

Due to the limited area of a computer screen, such as the user'scomputer 110 a, only a limited view of the website under construction isvisible to the user at one time. This is shown as the display area 142,which is shown as currently visible on the user's computer 110 a. Asshown in FIG. 1, on the first web page 1 of N, the title, navigationcontrols, body, blog, and footer are visible in the display are 142.However, this first page 1 of N also includes an image and a sidebar,which are not in view of the display are 142, but are nonetheless a partof the first page 1 of N. As will be appreciated, in order for the userto view and interact with the portions of the first page 1 of N, he orshe must scroll the webpage up into the display area 142 to expose areasof the page 1 of N for viewing and interaction that cannot besimultaneously displayed because the page under construction is largerin dimension (e.g. the length of the web page) than the length of theviewing of display area 142.

Similarly, no components of the other pages 2 of N or 3 of N are visiblein the display area 142. The user must select another page for editingthrough a user command (not shown) in order to cause these otherworkspace regions to be exposed in the display area 142 for inclusion orediting of content.

In accordance with aspects of the invention, as will be described inmore detail below, a system constructed as described herein allows auser (website owner or creator) to view other portions of thedevelopmental website, invoke various user controls for inclusion ofadditional content and editing of existing content, in a convenient andintuitive manner.

Before turning to a description of specific website creationfunctionality according to aspects of the invention(s), turn next toFIG. 2 for a brief description of the 5 computing environment for thewebsite hosting and construction system 120.

FIG. 2 is a block diagram of the physical components of the system 120,on which program modules execute to effect the functions and features ofthe website construction management module (logged-in server) 122, awebsite hosting module (site server) 124, and when provided, anassociated computing function 125, as generally shown in FIG. 1. Thephysical components illustrated in FIG. 2 include a firewall 205, whichprevents unauthorized users from accessing the system 120 and preventsmalicious traffic floods in the known manner.

The physical components also include network devices such as Cisco ACEservers 210, which serve as load balancers for incoming network trafficin the known manner. Routers 212 route network traffic within the systemin the known manner for internal (i.e. intranet) and external networks.Further, nameservers 215 resolve interne domain names to correct IPaddresses in the known manner. Site servers 124 displayed in FIG. 2generate and send rendered websites created by users of the websiteconstruction system (WHCS) 120 to site visitors, i.e., users of websitescreated by users of the website construction system 100, in the knownmanner. Logged-in servers 122 host the WHCS 120 and are responsible forupdating the database 128 with changes initiated during the creating andediting sessions of users of the website construction system 100, in theknown manner. Platform servers 125 house platform applications, i.e.,dynamic webpages created by users of the WHCS 120 that do not utilizethe drag-and-drop interface, in the known manner.

FIG. 2 also includes memcache servers 220, which store data frequentlyaccessed by users creating developmental websites through use of theWHCS 120. Memcache servers 220 help to improve performance of the system120 in the known manner. The storage cluster 225 shown in FIG. 2 is usedto store static assets, e.g., images, used in websites created by usersof the WHCS 120 in the known manner. Finally, the database 128 shown inFIG. 2 stores all data associated with the websites created with theWHCS 120 in the known manner.

FIGS. 3A-3F show a top level development window 300 viewable by a user301 shortly after login. This development window 300 is the top of ahierarchical GUI (Graphical User Interface) described by the screenviews (screen shots) following in FIGS. 3B-3F. The development window300 includes a site selection container (window) 302 includingselections 304-1 . . . 304-N for each website created by the user. FIG.3A shows the control flow from the development window 300 to the windowsof FIGS. 3B-3F. Selection of a website 304 leads to a developmentdisplay sequence 310, having a plurality of screens 320-1 . . . 320-Neach corresponding to a specific website 304 of the user. Thedevelopment display sequence 310 has display modes 312 selectable fromuser controls depicted as tool icons 420. The display modes 312 includewebpages 314 existing in the website, shown in FIG. 3C, a builderdisplay 330 for modifying a page, shown in FIG. 3D, a theme display 340,as shown in FIG. 3E, corresponding to colors and styles of all pages inthe website, and a control display 350 in FIG. 3F, for administrativecontrols, which is also available directly from the site edit button306. Each of the display modes 312 is also selectable from within theother modes.

Selection of the builder 330 allows generation of window based contentfor insertion in the website 400 (FIG. 4). Referring to FIG. 3D and alsoto FIG. 4, in the builder display mode, user selectable controls 435, ormodules, allow insertion of containers. Each user selectable control 435has a corresponding toolbar 418 of user controls shown as tool icons 420specific to the selected module 435. The builder screen 330 receives,from one of the plurality of modules 435, which are user selectablecontrol items, corresponding to types of window based screen elements, aselection of a module 435 for defining a container 150 responsive to atype of the screen element, in which the type determines the datadisplayable in the screen element (text, image, video, etc.). Typically,each container 150 corresponds to a display window on the screen forrendering the corresponding content. Pointer commands (e.g. mouse dragand click) position the container 150 by placing the correspondingmodule 435 on the screen, and a selection is received indicative of asource of the data for populating the container 150, such that thesource based on the type of the screen element. Typically, a fileselection based on a file browser window appears, however may differbased on the type of data expected to populate the container. The screenactivates a toolbar 418 of content specific tool icons 420, such thatthe tool icons 420 are based on the type of container (e.g. screenwindow) for modifying the data from the selected source. Upon selection,the display area 142 displays an interface responsive to each of theactivated tool icons 420, and receives a selection of at least one ofthe tool icons 420.

Selection therefore presents a hierarchical screen arrangement in thedisplay sequence 310 for constructing the website under construction 400(the “developmental website”), in which the screen arrangement includesthe site selection window 300 for selecting the website underconstruction 400 from a plurality of available stored websites 304-1 . .. 304-N (304 generally), and a display mode 312 for identifying a set offeatures for modification, such that each display mode 312 has acorresponding screen 320, 330, 340 and 350. Each display mode 312 isselectable from any of the other display modes by activating the usercontrols to enter another mode 312.

The display modes 312 and corresponding screens include a webpageselection mode 320 for selecting pages 314 of the website underconstruction 400 for modification, as shown in FIG. 3 c, and a builderselection mode 330, as shown in FIG. 3 d, for adding and modifyingcontent of the selected website 304 and webpage 314. A theme selectionmode 340, shown in FIG. 3 e, is for modifying common colors and stylesof all pages in the website 314, and a control panel selection mode 350,as shown in FIG. 3 f, is for managing administrative details. Thebuilder mode 330 is the primary conduit for defining the appearance andcontent of the website under construction 400, discussed in greaterdetail below in FIGS. 4-4E below.

User Interface for Developmental Website

FIG. 4 illustrates an exemplary embodiment of a developmental websiteaccording to aspects of the various invention(s). The developmentalwebsite 400 is generated and displayed to a website developer (user)using a Website Development Platform (WDP or “platform”) such as isshown generally in FIG. 1. According to one aspect of the presentsystem, the platform generates a developmental website 400, one or moredevelopmental webpages 405, and a viewable display region 410 allowing auser to view a developmental website workspace region 415, and varioususer-selectable tool icons 420. The platform further comprises apredetermined docking region 430, user selectable controls 435 in thedocking region, and one or more scrolling region(s) 440. As referred toherein, “developmental website” generally refers to a website or otheronline page that is in development or under construction by a systemuser (e.g., developer). As shown in FIG. 4, a developmental website 400generally comprises multiple developmental webpages 405, suchdevelopmental webpages typically allowing a user to construct andcustomize a website by adding website content items such as text,titles, images, or similar items that will occur to one of ordinaryskill in the art.

As shown in the exemplary embodiment of FIG. 4, a viewable displayregion 410 provides a display to a user interacting with the websitedevelopment platform (WDP) of the functionalities available forconstructing a developmental website. The viewable display region 410generally allows a user to view a developmental website's segment of adevelopmental website with which a user is currently interacting inorder to construct a developmental website. The viewable display region410 is typically the viewable area of the developmental website, asdisplayed on the user's computer monitor. As will be appreciated, and inaccordance with aspects of the invention, the viewable 5 display regionis generally smaller than the developmental website 400 or a typicalpage thereof.

The viewable display region 410 likewise displays user-selectable toolicons 420 (toolbar and display mode), 435 (modules) and 460 (moduleselection). According to one aspect, the user-selectable control items435 in the docking region 430 are selectable and draggable. Initially,such items are positioned along the predetermined docking region 430 toprovide a fixed location for user convenience and familiarity. Whenselected and dragged, a user-selectable control item 435 assumes adifferent appearance to the user, to indicate that the item is beingdragged from the docking region 430. Preferably, a blank space (notshown in FIG. 4) appears on the docking region at the location of theselected control item while it is being dragged by the user, to indicateto the user of the selection of the item and reinforce the type of item,and provide a visual cue that the control item will reappear (repopulatein the docking region) upon release of the item or other similar usercommand. The module controls 460 allow selection between different setsof modules 435, discussed below.

The user-selectable control items 435 provide the user with access towebsite construction functionalities represented by the control items.Generally, website construction functionalities represented by theuser-selectable control items allow a user to incorporate a plurality ofwebsite construction content items into a developmental website. Websiteconstruction content items typically allow a user to add website contentto a developmental website, such content including text, images, videos,buttons, slideshows, maps, and similar items for constructing a websiteas will occur to one of ordinary skill in the art. For example, if adeveloper wanted to add a picture of a car or a cat to a developmentalwebsite, as is shown in FIG. 4, the developer would select animage-specific user-selectable control item 435 from the docking regionand drag and release the user-selectable representation of theuser-selectable control item into the developmental website workspaceregion 415 to place an image representation at a desired location. Thiscontrol item 435 therefore allows addition of the image-specific websiteconstruction content item corresponding to the control item 435 to theworkspace region 415.

As will now be understood, the viewable display region 410 provides apredetermined docking region 430 that provides a user with a convenientlocation for accessing a plurality of user-selectable control items 435while constructing a developmental website 400. Additionally, theviewable display region 410 displays other user control tool icons 420(aside from the control items in the docking region) that allow a userto make alterations to a developmental website. Alterations to adevelopmental website may include adding new webpages to thedevelopmental website, renaming developmental webpages, or similaractions that will occur to one of ordinary skill in the art.

According to another aspect, the viewable display region 410 displaysscrolling regions 440, shown as a pair of separate scrolling regions 440a, 440 b, positioned to either side of the docking region in FIG. 4, asone example of placement. Scrolling regions 440 allow a user to select acontrol item 435 while viewing one area of the developmental website400, represented by a developmental website workspace region 415 in theviewable display region 410, and navigate (e.g. drag) theuser-selectable representation of a user selectable control item to adifferent portion of the developmental website, thus allowing the userto select a website construction functionality prior to deciding thelocation of the developmental website into which the functionalityshould be incorporated. For example, a developer may select theimage-specific user-selectable control item (e.g. item 437), or module,from the docking region 430 in order to place an image of a cat 451 atthe top of the developmental webpage. If the user then decides that theimage would be better suited for the bottom of the webpage, thescrolling region 440 allows the user to navigate (drag the control item)to the bottom of the webpage to the scroll region, to expose additionalarea of the developmental website 400 previously hidden from view,without placing the control item back in the docking region and manuallyscrolling to the bottom of the webpage using a standard scrollbar, aswill be understood by one of ordinary skill in the art.

In the builder display 330, a set of module controls 460 navigatesbetween different sets of available modules (user selectable controlitems 435) depending on the type of container being entered by thedeveloper/user. Thus, the various user controls for generating websitecontent include the previously discussed display modes 312 correspondingto a type and granularity of modifications to perform to a website underconstruction 400, modules (user selectable control items) 435corresponding to containers 150 based on types of window based displaymediums, such each module 435 is specific to a particular displaymedium, and toolbars (user controls) 418 specific to each of the modules435, in which each of the toolbars 418 has a set of tool icons 420 formanipulating the content of display medium of the module 435 to which itcorresponds. The module control 460 selects between different sets ofmodules 435 (general, layout, social, commerce and app feeds) available,as discussed with respect to FIGS. 4A-4E.

FIG. 4A shows a general set of modules 435-1 for inserting or modifyingcontainers in the workspace 415. The general modules 435-1 correspond todifferent types of media available for placement in containers 150 onthe webpage 405. FIG. 4B shows layout modules 435-2 for arranging thecontainers on the webpage 405. FIG. 4C shows social media modules 435-3for defining interfaces to external social media sites. FIG. 4D showscommerce modules 435-4 for interfacing with third party paymentauthorities for enabling monetary transactions in the website underconstruction 400. FIG. 4E presents application modules 435-5 forenabling application feeds and control from launched applications.

Retractable Dock for Control Items

FIG. 5, consisting of FIGS. 5A-5C, are exemplary screenshots of thedevelopmental website workspace region 415 at two different instances oftime to illustrate aspects of retraction of the docking region 430. Asshown in FIG. 5A, a developmental workspace region 415 provides a regionfor constructing a developmental website 400. As shown in thedevelopmental workspace region 415, a user is able to manipulate auser-draggable representation 435 a of a selected user-draggable controlitem out of the predetermined docking region 430 for purposes of addingwebsite construction functionality to a developmental website. When auser removes (drags) a representation of a user-selectable control item(e.g. 435 a) from the predetermined docking region, the remaining usercontrol items on the docking region 430 retract in appearance to assumethe view as shown at 435′, thus providing the user with a maximizeddevelopmental website workspace region. The remaining retracted userselectable control items thereby form a retracted image version of thecontrol items in the docking region, as shown in FIG. 5A.

As shown FIG. 4 and FIG. 5, visual representations of user-selectedcontrol items 435 are illustrated as movable tiles or icons; however, aswill be understood by one of ordinary skill in the art, a visualrepresentation of a control item may comprise a variety of otherrepresentations of control items such as boxes, icons, selectablebuttons, or similar items that will occur to one of ordinary skill inthe art. Embodiments of the present system and methods are not intendedto be limited in any way by the shown representations of theuser-draggable representation of the user-draggable control item. FIG.5B is a screenshot similar to that of FIG. 5A, at a different point intime, showing a developmental website workspace region 415 with theuser-selectable control item 435 b having been relocated (returned bythe user) to the proximity of the docking region 430. FIG. 5B isintended to demonstrate a scenario in which a user has returned theselected user-draggable control item 435 b to the proximity of thedocking region, perhaps after the user has decided not to place thewebsite construction functionality associated with the selected controlitem into the developmental website workspace region. Upon returning thecontrol item 435 b to the proximity of the docking region 430, theplurality of unselected control items unretract (emerge, ascend) fromthe docking region, thereby forming an unretracted image version of theunselected control items 435 in the docking region 430 while alsoproviding an evacuated space 510 formerly occupied by the currentlyselected control item 435 b. The evacuated space 510 signifies to theuser the location for returning the particular type of control item tothe docking region 430, thus allowing the user to select a differentuser-draggable control item or otherwise manipulate the developmentalwebsite.

Although the user may return the selected control item 435 b to theexact location that the control item originally appeared (represented inFIG. 5B as the evacuated space 510), in accordance with aspects of thedisclosure, merely bringing the control item 435 b to the vicinity (apredetermined distance) of the docking region 430 and releasing themouse indicates that the control item is to be returned to the evacuatedregion. The return of the control item 435 b is thus automatic whetherthe item is returned to the evacuated region or merely to the vicinityof the docking region. Because each control item 435 is of a distincttype and originally resides in a predetermined location, and only onecontrol item may be selected at a time, it will be appreciated that thecontrol item automatically and consistently returns to its predeterminedlocation so as to reinforce location association of the control item inthe user's mind.

Referring now to FIG. 5C, once a user drops or releases a selectedcontrol item such as 435 a in FIG. 5A into the developmental websiteworkspace region, all control items 435 reappear in the docking region430, i.e. the docking region ascends or reemerges from its retractedview and reassumes the original view of the docking region 430 andassociated control items 435. The user-selectable control items 435 thatreappear in the docking region form an unretracted image version of theplurality of user control items in the docking region, thus providing auser with convenient access to the control items for making anotherselection of functionality for modifying the developmental website.

Scrolling Region for Exposing Additional Workspace/Buffer Region

FIG. 6, consisting of FIGS. 6A-6B, is a screenshot illustrating aspectsof a developmental website workspace region 415 at two different pointsin time to illustrate the generation of additional space in the form ofa buffer region 610 for a developmental website. At a first time, asshown in FIG. 6A, a user has dragged a representation of auser-selectable control item 435 into a scrolling region 440 in order toaccess a region of the developmental website 400 not currently shown inthe display region 410. As shown in FIG. 6A, the developmental website400 may include additional space (allocated in memory) below the viewingarea of the display region 410 that is not presently visible to 10 theuser.

Although FIG. 6 shows lower scrolling regions 440 on either side of thedocking region 430, it will be understood that the scrolling region 440could encompass the entire lower boundary of the developmental websiteworkspace region. Also, it will be understood that an upper scrollingregion 445 may be provided to allow for scrolling the developmentalwebsite 400 downwardly.

FIG. 6B illustrates the additional space or a buffer region 610 for thedevelopmental website 400 that is accessed by movement of a selectedcontrol item 435 to a scrolling region 440 in FIG. 6A. As shown in FIG.6B, the user drags the selected control item 435 into the scroll region440, which causes the system to scroll the developmental website 400upwardly in the direction of arrows 614, thereby exposing additionalareas of the developmental website that once were “off screen” below thelowermost boundary of the display region 410. The user provides acommand for scrolling by dragging the control item 435 to the scrollingregion and holding the control item in the scrolling region. Once theuser scrolls to the lowermost extent of the developmental website 400,the scrolling ceases and an “end line” or lowermost extent or boundary620 of the developmental website is displayed. The cessation ofscrolling indicates to the user that the end of the developmentalwebsite has been reached. Still referring to FIG. 6B, when the scrollingceases, with display of the buffer region 610 and lowermost extent 620of the developmental website, the user may, if desired, release the dragoperation to insert the functionality represented by the selectedcontrol item 435. As seen in this figure, the buffer region 610 isdisplayed in the display region below the lowermost extent 620 of thedevelopmental website. This buffer region allows the user access to thedevelopmental website that is unobstructed by the docking region or theuser-draggable control items. Therefore, the user is able to place thecurrently selected user-draggable representation of the user-draggablecontrol item and resultant website construction functionality in anylocation within the workspace region capable of accepting websitecontent items.

According to an aspect of the system and methods, release of the controlitem 435 after scrolling has ceased in any space above the dockingregion 430, generally beneath the last content item such as the imagecontainer 635, causes insertion of the functionality within thedevelopmental workspace after the last content item 635. In this aspect,a representation of the inserted functionality (such as another image ora text item) is displayed to the user and the lowermost extent 620 ofthe developmental website is no longer displayed (i.e. the lowerboundary line is no longer displayed), and the workspace region 415expands to accommodate insertion of the new functionality. For example,a new content item container appears. The workspace region 415 expandsto fill the space to the lowermost portion of the display region 410,with a representation of the inserted content visible, in a mannersimilar to that in FIG. 6A.

In further detail, continuing referring to FIGS. 5A-5C and 6A-6B, thedocking region 430 and buffer region 610 are complementary for providinga visual editing tool for editing an on-screen image, and, includes aworkspace 415 for rendering an edit document 417. The edit document 417is responsive to editing modules, selected by control items 435, formodification according to an edit function performed by each of theediting modules 435. Each of the editing modules 435 is rendered as anediting icon 435 a displayed in an overlay 422 in front of the workspace415. In the example arrangement, a user invokes the editing modules inresponse to the webpage design tool, such that the workspace furthercomprising a webpage under development 400 adapted for a graphical userinterface (GUI) responsive to a browser.

A video screen or other rendering device 110 provides a rendering area419 in the workspace region 415 defined by a physical visual displaysurface 142 (FIG. 1), including the on-screen image, in which therendering area 419 displays at least a portion of the edit document 417of the current page 405 of the website 400. The buffer region 610 isadjacent to the edit document 417 on the workspace, and allows unimpededviewing of the edit document 417 by occupying a background area behindthe editing icons, in which the overlay effectively extends thebackground such that none of the editing icons 435 a overlays orobscures the edit document 417 on the workspace 415. In the examplearrangement, the buffer region 610 may be thought of as occupying thelowermost region of the workspace 415 and the edit document 417 occupiesthe area above the buffer region 610.

In the example arrangement, the buffer region 610 is activated by avertical window slider 439 (FIG. 4A) responsive to a pointing device(i.e. mouse) for scrolling the workspace across the rendering area 419,in which the buffer region 610 is disposed at a lower edge of theworkspace 415 and is drawn into the rendering area at an extreme rangeof the window slider 439. The editing icons 435 a initially reside in adock 450 in the docking region 430, such that the dock 450 groups theediting icons in the buffer region 610 when the rendering area extendsbeyond the edit document. The rendering area 419 is therefore adapted todisplay at least a portion of the editing icons 435 a representing theediting modules 435. The editing icons 435 have a retracted rendering(435′) and a full rendering, such that the retracted rendering 435′ iscontained within the buffer zone 610 providing that the workspace 415 isunimpeded.

As best seen in FIGS. 5A-5C, the dock 450 includes a retraction slot 452for retracting at least a portion of the editing icons 435, such thatthe retracted portion is not visible in the rendering area and an areaoccupied by the editing icons 435 is thus available for rendering theedit document 417. The dock 450 appears visually as a slot 452 in a boxinto which the editing icons retract, and has the colloquial appearanceof a “slice” in a “toaster.” The editing icons 435 a are responsive tothe dock 450 for rendering in a sequential order, typically a horizontalrow. The sequential order defines a visibility space 453 between eachediting icon 435 such that the workspace 415 is visible in thevisibility space 453. The visibility space 435 is therefore defined bythe separation between the editing icons 435 so that even when notretracted, the workspace content is visible in a somewhat interruptedmanner “behind” the icons 435.

The entire editing area defined by the workspace 415 is thereforeresponsive to window slide controls 439, in which the window slidecontrols 439 are for scrolling portions of the edit document 417 outsidethe rendering area 419, in which the buffer region 610 is rendered at anextreme range of the window slide controls. In the example shown, thebuffer region appears when the slider pulls the lowermost portion of theworkspace 415 in to the rendering area 419, the edit document 417 beingresponsive to the rendering device 110 for visual perception by a user.Alternate arrangements of the dock 450, buffer region 610 and windowslider controls 439 may be envisioned, such as at the sides or top ofthe screen, as suited to the preferences at hand.

Expandable Workspace

FIG. 7 illustrates the foregoing aspects of the disclosed system infurther detail. FIG. 7, which consists of FIGS. 7A-7B, are screenshotsof a developmental website workspace region 415 displaying the lowermostextent of a developmental website 400 and an accompanying buffer region610. As shown in FIG. 7A, a docking region 430 comprising a plurality ofuser-selectable control items 435 is displayed in the buffer region 610,and no control items have been selected by the user. According to oneaspect, once a user selects a control item, such as is shown at 435′ inFIG. 7B, the developmental website workspace region 415 expands toprovide the user with additional easily accessible workspace forinserting the functionality of the selected control item 435.

As FIG. 7B further illustrates, according to one aspect, when a userselects a control item, the browser's scrollbar representing thevertical height of the developmental website adjusts (expands) tosignify the expansion of the developmental website. And as previouslydescribed, the website workspace region 415 expands to fill the space tothe lowermost portion of the display region 410, revealing an expandeddevelopmental workspace region 720 that replaces the buffer region.

According to one aspect, website construction content items and theircorresponding functionalities are inserted into a developmental websiteupon a user command, such as by clicking on a corresponding control item435 (FIG. 4, but not specifically shown) and dragging a representationof the control item into the developmental website workspace region 415.The functionality of that control item, for example, insertion of a textbox, or image, or video, or content carousel, is thereby inserted at theselected location within the developmental website workspace region 415.Further details of particular types of content items and theirfunctionalities are described elsewhere herein.

Content Container Type-Specific Toolbars

FIG. 8A, consisting of FIGS. 8A-8C, are screenshots illustrating aspectsof website content container type-specific toolbars associated withinsertion of specific types of content into a developmental website.These figures illustrate an exemplary developmental website workspaceregion 415 into which a user has placed specific types websiteconstruction content items 810 a, 810 b for inserting website contentinto the developmental website. For example, as is shown in FIG. 8A, theuser has placed both an image content item 810 a and a text content item810 b into the workspace region 415 for adding images and text to thedevelopmental website, respectively.

According to one aspect, as shown in FIG. 8A, website constructioncontent items 810 a, 810 b and their corresponding functionality areinserted into a developmental website upon a user command, such as byclicking on a corresponding image or text control item 435 (FIG. 4, butnot specifically shown) and dragging a representation of the controlitem into the developmental website workspace region 415.

According to one aspect, the website construction content items 810 a,810 b are also considered, more generally, to be content containers. Theboundaries of such items are initially predetermined by the system tofit within the available space. The corresponding content of suchcontainers or items may be resized or otherwise manipulated to fitwithin a predetermined maximum boundary, as in accordance with otheraspects of the disclosure.

According to another aspect, once a user 301 inserts a particularcontent item for editing, a corresponding content type-specific usercontrol region and/or associated content controls are displayed in thedisplay region 415 that provides the user with content-type specifictools for manipulating the particular selected content item, suchcontent items including text, titles, images, or similar items that willoccur to one of ordinary skill in the art.

As one example, as shown in FIG. 8B, a user has selected a text-specificcontent item 810 b for editing. A corresponding text-specific usercontrol is displayed in the display region, thus providing the useraccess to text editing options. As shown in FIG. 8B, the text-specificcontent control comprises a text insertion box with blinking cursor toindicate that text may be selected, typed, or deleted. Other types oftext-specific controls that may be displayed (but are not so displayedin FIG. 8B) include such text controls as format controls (such as bold,underline, italicize, etc.), font selection, font size selection, andother similar text-specific editing options as will be understood by oneof skilled in the art.

As another example, as shown in FIG. 8C, a user has selected animage-specific content item 810 a for editing, and a correspondingimage-specific user control region is displayed in the display region.In this example, the image-specific controls include a zoom slider 820and image resizing handles 822 a-822 e. The image-specific user controlsallows the user to access image editing options as will be understood bythose skilled in the art.

Image Manipulation

FIG. 9A, consisting of FIG. 9A-9G, illustrates aspects of imagemanipulation in a website construction system constructed in accordancewith the present disclosure. FIG. 9 provides exemplary screenshots of adevelopmental website workspace region 415 in which a user has selectedan image-specific content item 810 a (see FIG. 8C) in order to add animage to the developmental website 400. According to one aspect, animage-specific content item generally comprises an image containerregion 910 of predetermined initial height and width for confining animage to particular predefined spatial regions of the developmentalwebsite 400. Although the following discussion is specifically directedto an image container, it will be understood that certain principles ofoperation are applicable to other types of content containers forconstructing a developmental website. The image container region 910 inFIG. 9A corresponds to a content container or item 810 in FIG. 8.

According to one aspect, as shown in FIG. 9A, an image container region910 is inserted into a developmental website upon a user command, suchas by clicking on a corresponding carousel control item 435 (FIG. 4, butnot specifically shown) and dragging a representation of the imagecontainer control item into the developmental website workspace region415. An image container region 910 typically comprises an image view 920of predetermined height and width less than the image container region,such image container region typically providing a region where usersdisplay and modify images selected for inclusion in the developmentalwebsite. The image view 920 comprises a view of a selected image, havinga dimension reduced by the system to fit within the image containerregion 910.

According to one aspect, in response to user selection and insertion ofa particular image into an image container region 910, such image isdisplayed within the image view region 920 having a predeterminedresolution and dimensions less than those of the image view region 910.For example, as shown in FIG. 9B, the user has selected an image 925 ofa cat to include in the developmental website, such image displayed inthe image view region.

According to another aspect, in further response to user selection andinsertion of a particular image into an image container region 910,certain type-specific user controls (i.e. specific to images in thepresent example) are displayed in the developmental workspace for imagemanipulation. As shown in FIG. 9C, a slider control bar 820 is displayedproximate to the image container 910 for zooming the image within theimage container region. In FIG. 9C, the user has manipulated the slidercontrol bar 820 resulting in a zoomed representation 930 of the catimage 925 previously displayed in FIG. 9B; however, the manipulation ofthe cat image has not affected the underlying size of the imagecontainer region 910 or the image view region 920. Rather, the cat image930 is zoomed but still confined within the image view region 920. Aswill be described next, the image view region 920 is independentlyadjustable.

According to another aspect, in further response to user selection andinsertion of a particular image into an image container region 910, animage height control handle 822 c is displayed proximate to the bottomof the selected image 925, as is shown in FIG. 9D. As will beunderstood, an image height control handle 822 c allows a user to adjustthe height of the image view region 920 and the selected image relativeto the fixed uppermost initial extent of the selected image. Forexample, FIG. 9D shows an adjusted image view 930′ of the cat image 925initially displayed in FIG. 9B. In this figure, the user has manipulatedthe image height control handle 822 c to adjust the height of theoriginal cat image such that the adjusted image view 930′ of FIG. 9Donly displays the cat's hind legs and tail. The image view region iscorrespondingly resized from 930 as in FIG. 9C to that of 930′ as inFIG. 9D subsequent to the user's manipulation of the image heightcontrol handle. As will be understood, user manipulation of an imageheight control handle can result in a multitude of adjusted image viewsrelative to the fixed uppermost initial extent of the selected image.

According to another aspect, in further response to user selection andinsertion of a particular image into an image container region 910,image width control handles 822 a, 822 e are displayed proximate to thesides of the selected image 925 as shown in FIG. 9E. An image widthcontrol handle allows a user to adjust the width of the image viewregion 920 and the selected image view 930 relative to a side (orheight) of the image. For example, in FIG. 9E, the user has manipulatedan image width control handle 822 e to adjust the width of the originalcat image 925 such that only half of the cat appears in the adjustedview image 930″. The image view region is correspondingly resized from930 as in FIG. 9C to that of 930″ as in FIG. 9E subsequent to the user'smanipulation of the image width control handle. The width of the imageview region in FIG. 9E has likewise been resized to correspond to theuser's manipulation of an image width control handle. User manipulationof an image width control handle can result in a multitude of adjustedimage views 930″ relative to a side of the image within the boundariesof the image container region 910.

In this manner, the method of editing a digital video image as describedherein includes identifying a rendered digital image 925 having aspects,such that the aspects define translation of a raw image 921 from acontent source (typically an image on disk) to a rendered image 925.Aspects include a height and width, as well as overall size and zoom/panover a portion of the original raw image imported from the contentsource. A user or website designer invokes an edit function (such as 822a-e) for modifying at least one of the aspects, such that the editfunction simultaneously performs a corresponding modification to aspectsresponsive to other edit functions based on corresponding or dependentaspects to maintain proportions of the original raw image 921. Thus, theedit functions result in rendering the modified digital image such thatthe corresponding aspects maintain an aspect ratio of the rendereddigital image 925.

The edit functions performed by edit handles 822 a-822 e (822 generally)modify aspects of the image 925 such that each edit function (handle)822 affects aspects for which a subset of the aspects are affected byone of the other edit functions 822. In other words, invoking an editfunction 822 to change certain aspects triggers changes of othercorresponding aspects if the image 925 is to remain visually consistent.For example, changing the width also triggers a corresponding change inthe height if the image 925 is to remain proportional and not appeardistorted. Such simultaneous modification of corresponding aspectsavoids disproportionate pixelation resulting from a horizontalappearance being scaled differently then a vertical appearance.

According to another aspect, in further response to user selection andinsertion of a particular image into an image container region, imageresizing control handles 822 b, 822 d are displayed proximate to thebottom corners of the selected image 925 as shown in FIG. 9F. The imageresizing control handle allows a user to simultaneously adjust theheight and width of the image view region 920 and the selected imagewithin the boundaries of the image container region 910. As shown inFIG. 9F, the user has manipulated an image resizing control handle 822 bsuch that the height and width of the cat image 925 are both increasedrelative to the cat image as displayed in FIG. 9B. The height of theimage container region as well as the height and width of the image viewregion have likewise been increased subsequent to the user command. Theimage view region is correspondingly resized from 930 as in FIG. 9C tothat of 930′″ as in FIG. 9E subsequent to the user's manipulation of theimage resizing control handle. As will be understood, user manipulationof an image resizing control handle can result in a multitude ofadjusted image views 930′″ within the boundaries of the image containerregion 910.

According to an additional aspect, and in further response to userselection and insertion of a particular image into an image containerregion 910, the disclosed system provides a user with the ability to pan(move around without resizing) a selected image within the image viewregion 920. A pan control allows a user to reposition a zoomed or otherimage view of a selected image 925 within the image view region 920, toobtain an adjusted view such as that shown at 930″″. Often, a pancontrol assumes the form of a “hand” icon as cursor such as shown at940, which is selected by a user command (not shown). For example, inFIG. 9G, the user has panned the zoomed image 925 from. FIG. 9C suchthat the adjusted image view 930″″ includes not only the cat's face buta portion of the chair shown in the original image view 930 displayed inFIG. 9B. As will be understood, user manipulation of pan control canresult in a multitude of adjusted image views within the boundaries ofthe image container region 910.

According to the present embodiment and as will be appreciated by one ofordinary skill in the art, the adjusted image views presented in FIGS.9C-G, each of which result from user manipulation of the plurality ofimage controls displayed subsequent to user selection and insertion ofan image into an image container region, are neither stretched nordistorted relative to the original cat image shown in FIG. 9B.

Upon invoking a plurality of the edit function handles 822, in whicheach of the edit functions 822 affects at least one aspect, theconstruction module 122 applies a first edit function 822(a-e) of theplurality of edit functions 822, such that the first edit functionmodifies at least one of the aspects affected by another second editfunction of the plurality of edit functions 822(a-e). Thus, the sameaspect may be changed by more than one handle 822 and modification ofcorresponding aspects of one handle 822, results in indirectmodifications of the corresponding aspects, as if the changes had beenmade by the handle causing direct changes to the corresponding aspects.The construction module 122 thus defines a plurality of the editfunctions as handles 822, in which the edit functions 822 are mutuallydependent such that a first edit function modifies an aspect that isalso modified by a second edit function of the plurality of editfunctions.

In the example arrangement, the aspects include scale, horizontal size,vertical size, horizontal rendering area, vertical rendering area, suchthat the horizontal size affects the horizontal width of the renderedimage while maintaining the vertical distance, and the vertical sizeaffects the vertical height of the rendered image while maintaining thehorizontal distance. Similarly, the scale handle affects pixelation ofthe rendered image while maintaining horizontal and vertical distance,the horizontal rendering area defines a horizontal range of a renderedportion of the raw image, and the vertical rendering area defines avertical range of a rendered portion of the raw image 921 pulled fromthe content item source.

In the example configuration, the invokable edit functions includeresize, crop, pan and zoom the resize control handle 822 b, 822 ddefines the horizontal size and vertical size proportionally such thatthe aspect ration is maintained and scale is modified. A zoom control820 affects scale while maintaining horizontal size and vertical size,and a horizontal cropping control 822 a, 822 e affects the left andright horizontal rendering area, respectively, defining the horizontalportion of the raw image 921 for rendering, and modifies the horizontalsize proportionately while maintaining the vertical size and scaleaspects. A vertical cropping control 822 c affects the verticalrendering area defining the vertical portion of the raw image forrendering, and modifies the vertical size proportionately whilemaintaining the horizontal size and scale aspects. In the exampleconfiguration, the horizontal and vertical rendering area define aframe, or viewing area 920, through which at least a portion of the rawimage is visible, as modified by cropping and panning.

Additional features are such that, in response to a user command forinsertion of another website content item, automatically resizing theimage container region, therefore accommodating additional containers tomaintain a visually pleasing appearance. Selection and insertion of theraw image 921 invokes a user control for selecting a particular imagefrom an image repository for insertion into the image container region,typically by a file browse window or other suitable scanning mechanism.Generally, the image manipulation controls are displayed prior todisplaying an image for manipulation.

The disclosed functions therefore provide for automatically resizing adisplayed content item in a content container of a website in connectionwith construction of the website by a user 301, by providing adevelopmental website comprising a developmental website workspaceregion for construction of the developmental website by the user, andproviding a viewable display region for display of a developmentalwebsite workspace region.

The user provides an original content 925 item having originalcharacteristics, and in response to a user command to include theoriginal content item in a first content container of the website, theconstruction management module 122 displays a proportionally sized firstrepresentation of the original content item in the display region 910confined within a predetermined initial display subregion 920 of thefirst content container, as shown in FIG. 9B. In response to a usercommand for manipulation of the first representation of the contentitem, the construction management module displays a modified firstrepresentation of the content item in the first content container, andin response to a user command to place the modified first representationof the content to a second content container of the website, displays aproportionally sized second representation of the original content itemsconfined with a predetermined initial display subregion of the secondcontent container, while reflecting the modifications from the usercommand for manipulation of the first representation, This approachprovides that the display of the first representation and the secondrepresentation of the content items are relative to the original contentitem and no adjustments resulting from user manipulations affect theoriginal content item, thus maintaining a visually pleasing andundistorted view of the rendered image 920 absent pixelation,stretching, or other distortion that often accompanies on-screenediting.

In the example arrangement, a predetermined size defines width andheight of the independent content containers to set a reasonabledefault. Also, a theme may be provided comprising an initial layout thatincludes a plurality of content containers in a predetermined spatialarrangement relative to each other, each of the content containers beingof a predetermined initial size.

Content Carousel

FIG. 10A, consisting of FIGS. 10A-10F, illustrates aspects of a contentcarousel 1001 for a developmental website according to aspects of thepresent disclosure. FIG. 10 provides exemplary screenshots of adevelopmental website workspace region 415 in which a user has selecteda content carousel 1001 for inclusion in a developmental website. Acontent carousel is a type of content container for use in constructinga developmental website. A developmental website can include none, one,or plural content carousels. Each carousel container is generallycapable of accepting and displaying various website construction contentitems such as images, video, textual material, etc. The notion of a“carousel” is that the content carousel comprises a plurality ofdifferent content items, such as images, and the images are successivelydisplayed by rotating or sliding or revolving into and out of view, inaccordance with predetermined image change rules and image transitionrules. One notion of a carousel is that of a “slide show” of images,where one image changes into another by sliding, or dissolving, or otherimage transition rule.

As shown in FIG. 10B, according to one aspect, a content carouselconstruction region 1005 and its functionality is inserted into adevelopmental website upon a user command, such as by clicking on acorresponding carousel control item 435 (Modules, FIG. 4) and dragging arepresentation of the control item into the developmental websiteworkspace region 415. This causes the system to generate and display acontent carousel construction region 1005, which initially has apredetermined initial height and width, but contains no specificcontent. Additionally, as shown in FIG. 10B, the content carouselconstruction region 1005 generally comprises user controls 1008 foradding, editing, removing, or otherwise manipulating content items, aswell as a carousel container display region 1010 for displayinguser-selected content items. The carousel container display region 1010preferably has a predetermined initial height and width less than thecontent carousel construction region 1005.

As shown in FIG. 10C, in response to a user command corresponding to theaddition of a specific content item to the carousel container, forexample an image, and according to one aspect of the disclosure, arepresentation of a selected content item 1012 having an initial viewand a predetermined resolution and size less than the initial height andwidth of the carousel container is displayed in the carousel containerdisplay region 1010. Such operation comprises the creation of a firstcontent carousel container 1013. As shown in FIG. 10C, a representationof a car image 1012 has been added the carousel via a carousel container1013, which is correspondingly displayed in the carousel containerdisplay region 1010 subsequent to a user's command. The content carouselmodule 435 is operable to place the content carousel 1001 in the desiredposition on the webpage 314, similar to the other containers generatedvia the modules 435. The content carousel 1001 then receives one or morecarousel containers 1013 for rendering screen elements 1012 including arepresentation of a rendered content item. The representation of the carimage has a predetermined view and resolution, and its height and widthare less than the carousel container as represented by the displayregion 1010.

As mentioned above, a carousel container may contain, and often willcontain, a plurality of content items that are successively displayed toa website viewer. Thus, a carousel may include a plurality of contentcarousel containers 1013, as will be described. Each of such contentcarousels 1001 may contain a plurality of carousel content containers1013, each of which is adapted to render content items as any of theuser controls 435 (modules) for defining static containers. For example,each of the carousel containers 1001 may be an image container adaptedto render a screen element including an image content item. FIG. 10Dillustrates aspects of the additional of a subsequent content item 1012b to a content carousel via addition of a second content carouselcontainer 1013 b, after the carousel already includes a first contentitem 1012 a in a first content carousel container 1013 a. In response toa user command corresponding to the addition of a second content item1012 b to the carousel container, and according to one aspect, arepresentation of a second content item 1012 b is displayed in a thecarousel container display region 1010, and the representation of thefirst content item 1012 a is taken out of primary view. Such operationcomprises the addition of a second content carousel container 1013 b.

For example, as shown in FIG. 10D, a second representation of a carimage 1012 b has been added to the carousel container display region1010. The representation of the second car likewise has a predeterminedview and resolution, and its height and width are less than the carouselcontainer.

Although FIG. 10D shows that a first content item carousel container1013 a is positioned to the left of the newly added, second carouselcontainer 1013 b, it will be understood that the first carouselcontainer could be positioned elsewhere such as above or below the newlyadded second carousel container, or could be hidden completely.

In the website construction tool 120, therefore, a carousel module 435may generate window based content as a series of rotating or cyclingpanels, or “carousel”, for insertion in the website 304 by receiving,from a plurality of modules 435 corresponding to types of window basedscreen elements, a selection of a carousel module for defining one ormore carousel containers 1013 responsive to a set of screen elementsarranged in an iterative rotation, such that each of the screen elementsis an image container 450 (or other type of container) responsive to acontent source for rendering content items. The disclosed carouselformat lends itself well to image containers for rendering photos and/orgraphics, however other types of containers 150 may be included in thecarousel, and need not be uniform (i.e. container types may be mixed).The construction module 122 populates, based on a received command, eachof the screen elements 1012 from the content source (the screen elementis the representation of the content item as rendered in the carouselcontainer display region 1010). The carousel enables rendering of eachof the screen elements 1012 according to an ordered sequence, such thatthe ordered sequence displays a portion of each successive and previousscreen element responsive to commands for advancing the ordering,typically a forward or backward rotation.

In the example shown, the carousel container 1013 arranges a pluralityof image containers in a visually uniform appearance, such that thecarousel container 1013 displays the image containers according to asequence. The sequence renders at least a portion of a current image1013 a container 150 simultaneously with at least a portion of asuccessive image container 1013 b, thus giving the appearance ofrotation as portions of the rendered image appear to rotate or pivot outof the rendering area of the content carousel 1001, as if rotated. Thecontent carousel 1001 thus renders the successive image container 1013 bin entirety as the current element 1013 a advances beyond the visualrendering area 1010. The carousel 1001 then renders the successive imagecontainer 1013 b as the current image container in anticipation of asubsequent command to advance the carousel 1001.

Carousel 1001 content is added to the website by displaying a usercontrol 1008 for adding a content item to an available screen element1012 on the carousel 1001, and displaying a window operative forselecting a content source for populating the available screen element1012. In the example shown, selection of the content source is a dragand drop mechanism between the content source and the availableselection 1012, such as a file open menu or similar interface. Oncegenerated, the carousel 1001 renders a current image container 150 and apredetermined number of available image containers 150 renderable ineither direction on the carousel, such that the available imagecontainers are renderable via rotation of the carousel. Thepredetermined number of available image containers 1013 is rendered in acompact form, such that the compact form displays an alternate viewhaving less detail than that of the current image container 1013. Thealternate view renders the image container at an angle, providing anappearance of viewing the image container being rotated on an axis intoor away from a direct line of sight. Therefore, a number of the carouselcontainers 1013 are visible on either side of a current (centered)container, and the side containers are rendered at increasing angles toprovide a circular arrangement.

The rendered content carousel 1001 is also adapted to receive a commandindicative of one of either directions, and to advance the current imagecontainer 1013 b to the successive image container 1013 a in thecommanded direction. In the example shown, right and left navigationears 1020, 1022 (respectively) provide bi-directional advancement.Further carousel operations include receiving a command to modify theheight of the current image container, and modifying the height of otherimages in the carousel to correspond to the height of the current imagecontainer for providing a uniform appearance to the carousel images,thus maintaining all carousel containers and images therein in a uniformarrangement.

According to another aspect, image manipulation controls specific to thetype of content, e.g. an image, are provided for user manipulation of aselected content item as that item is included into a carousel. As shownin FIG. 10E, a content height control handle 1015 is displayed proximateto the bottom of the content carousel display region 1010 subsequent toa user's command to add a content item to a carousel container. As willbe understood, a content height control handle allows a user to adjustthe height of a carousel container and the associated selected contentitem relative to the fixed uppermost initial extent of the currentlydisplayed carousel container. For example, FIG. 10E shows an adjustedimage view 1012′ of the car image 1012 initially displayed in FIG. 10D,where the user has manipulated the content height control handle 1015 toadjust the height of the original car image such that the adjusted imageview 1012′ only displays the car's side windows and windshield.According to one aspect, the carousel container 1013 itself is alsocorrespondingly resized subsequent to the user's manipulation of theimage height control handle. As will be understood by one of ordinaryskill in the art, user manipulation of a content height control handlecan result in a multitude of adjusted content views relative to thefixed uppermost initial extent of the currently displayed carouselcontainer.

According to another aspect, in response to a user's manipulation of thecontent height control handle 1015 to adjust the height of a particularcontainer, e.g., the container adjusted in FIG. 10E, the height of othercarousel containers 1013 within the same content carousel aredynamically adjusted to correspond to the previously adjusted containerto provide a uniform look to all carousel containers throughout thecarousel. As shown in FIG. 10F, the height of the initial content itemadded to the carousel, as previously depicted in FIG. 10C, has beenadjusted to correspond to the height of the carousel container asdepicted in FIG. 10E, thus providing uniform carousel container heightthroughout the carousel.

Web Page Links/Navigation Controls

FIG. 11, consisting of FIGS. 11A-11C, illustrate aspects of the additionof website end user navigation controls for effecting end usernavigation to multiple pages within a website constructed by a userconstructing a website. FIG. 11 provides sereenshots of a developmentalwebsite workspace region 415 in which an initial content item selectioncontrol, for example a “home page” navigation tab control 1105, isdisplayed in a content item selection control region 1110 ofpredetermined maximum horizontal dimension. As will be understood bythose skilled in the art, content item selection controls, oftenprovided in the form of tabs arranged in a linear alignment at or nearthe top of a website, are often used to navigate between webpages withina website. Such controls or tabs 1105 are often provided in a particularlinear arrangement known as a navigation bar 1112. However, it will alsobe understood that the principles of this aspect, as for other aspectsdescribed herein are not limited to navigation controls, although suchnavigation controls or tabs are a typical application.

As shown in FIGS. 11A-11C, the initial content item selection control1105 is of a first type displayed at the start of a sequence 1113 in thecontent item selection control region 1110. In the example shown, thefirst type extends in a horizontal direction, however any suitabledirection may be employed. The first type extends in the sequence 113 ina visually appealing manner, such that the rendering of the first typedoes not appear to crowd or overwhelm the display region with thenavigation bar 1112.

As shown in FIG. 11B, in response to a user command to include anadditional page in a developmental website, a new webpage container (notseparately shown) for receiving user-added content items is added to thedevelopmental website. In further response to user command to include anadditional page in the developmental website, a corresponding contentitem selection control 1105 b corresponding to the new page is generatedand displayed in the content item selection control region, for example,adjacent to the first or “home page” content item selection 5 control ortab 1105 a in the navigation bar 1112. As shown in FIG. 11B, the useradded a second page titled “Cat Toys” to the developmental website andthe new page and its corresponding content item selection control 1105 bwas generated and displayed in the developmental website workspaceregion 415.

It will be understood that a plurality of content item selectioncontrols 1105 may be added to the navigation bar 1112, as space maypermit. It will be appreciated that a website construction system asdescribed herein may only provide a navigation bar 1112 of apredetermined size, limited to the width of a typical webpage (and ascontrolled by the underlying HTML, CSS, or other construction mechanism)so that addition of oversized control items or tabs, or multiple controlitems, in the navigation bar 1112 can result in visual clutter to an enduser. Additionally, the size of the content item selection controlregion 1110 may be of a limited and predetermined size. In accordancewith another aspect, the inclusion of content item selection controlsthat are oversized or of a number sufficient to create a clutteredappearance, or exceed the allocated size for the control region 1110,are automatically rearranged into a less cluttered, more pleasingpresentation, as will be described.

As shown in FIG. 11C, and according to another aspect, in response todetection that the content item selection control generated in responseto a user command to include an additional page in the developmentalwebsite has exceeded the predetermined maximum horizontal dimension ofthe content item selection control region 1110 (and/or the navigationbar 1112), a second type of content item selection control 1115 isgenerated within the content item selection control region 1110 forcontaining and presenting the content item selection controls 1115 in adifferent manner. As depicted in FIG. 11C, after adding four pages inaddition to the original home page, with corresponding content itemselection controls 1105 a-1105 d, a second type of content itemselection control 1115 was generated to contain and display tosubsequently generated content item selection controls, e.g. 1105 e-1105h. This second type of content item selection control 1115 in FIG. 11Cis labeled “MORE”, although other legends could be applied, e.g. “OTHERPAGES,” or “ADDITIONAL CONTENT”, etc.

In operation, the website development system 120 receives designinformation for website user controls including receiving a plurality ofrequests for additional content pages, and generates, for each of theadditional content pages, a content item selection control, such thatthe content item selection control has a first type 1105 and a secondtype 1115. The first type and second types conserve visual viewing areaby displaying the first type in entirety and selectively displaying onlythe second type when activated by a pointing device or keystroke.Therefore, the first type is adapted to be rendered for a visuallyappealing number of the first type (i.e. a horizontal sequence acrosspart of the display screen), and the remainder (second type) are adaptedfor successive content item selection controls not rendered as the firsttype, such as via pulldown menu. Each of the first type and the secondtype nonetheless are content item selection controls corresponding toone of the plurality of content pages and responsive for selection ofthe corresponding content page. Thus, in operation on the resultinggenerated website, user selection of either the first type or the secondtype results in displaying the corresponding web page.

For visual appearance and screen formatting, the visually appealingnumber denotes a linear sequence of content item selection controls, inwhich the linear sequence based on a predetermined distance 116 acrossthe screen, such as half or ⅔ of the total distance across. The firsttype is adapted for full view of the content item selection control, andthe second type is adapted for a summary view, such that the summaryview selectively displays the content item selection control, thereforeonly requiring full concurrent display of the first type. The secondtype of controls (e.g. pull down buttons) are selectively displayed when“dragged across” or “clicked” by a mouse or other pointing device.

In the example arrangement shown, the second type is adapted for apulldown view 1106, such that the pulldown view is responsive toactivation from a pointing device (i.e. mouse “dragging” or “clicking:),in which activation renders a series of the content item selectioncontrols of the second type, such as the pulldown menu 1106. Althoughnot required, the linear sequence of the first type may extend in asubstantially orthogonal direction from the series of the second type,such as a vertical pulldown menu for the second type at the end of thefirst type sequence 113. The predetermined distance 1166 may be computedbased on the size of the rendering of the first type of the content itemselection controls and on an available display area, so as to avoid a“crowded” screen.

According to the present aspect and as shown in FIG. 11C, the secondtype of content item selection control 1115 is preferably a drop-downlist; however, as will be understood by one skilled in the art, thesecond type of content item selection control 1115 may comprise avariety of forms that will occur to one of ordinary skill in the art.

It will further be appreciated that a determination as to the number ofcontent item selection controls provided within the second type ofcontent item selection control 1115 may be dynamic and vary in responseto an end user's resizing of his or her view of the final deployedwebsite, and as a function of the size (e.g. number of characters, fontsize, font, etc.) of the legends on the controls 1105, and the allocatedwidth of the navigation bar 1112. Mechanisms for dynamic resizing andinclusion/exclusion of control items within the initially-providedregion 1110 for content item selection controls and the second type ofcontent item selection control 1115 are within the skill of the ordinaryartisan.

Resizing of Content Items Upon Relocation

FIG. 12, consisting of FIGS. 12A-12C, illustrates aspects of automaticresizing of content items provided in one content container are utilizedor move to another content container in a developmental website. FIG. 12provides exemplary screenshots of a developmental website workspaceregion 415 in which two content containers 1205 a, 1205 b are provided,and a content item such as an image 1210 is manipulated by user controlsduring construction of the website, and then utilized or moved toanother content container. As initially shown in FIG. 12A, a firstcontent container 1205 a displays an image 1210 of a cat as arepresentation of an original content item having inherentcharacteristics such as image size and resolution. The cat image 1210shown in FIG. 12A is confined within a predetermined initial displaysubregion of a first content container 1205 a and is proportionallysized.

According to one aspect, in response to a user command to manipulate thefirst representation 1210 of the content item, a modified firstrepresentation of the content 5 item is displayed in the displaysubregion of the first content container 1205 a. For example, as isshown in FIG. 12B, in response to a user command to resize the image ofthe cat, a modified representation 1210′ of the cat image is displayedin the display subregion of the first content container.

As shown in FIG. 12C, and according to one aspect, in response to a usecommand to place or move the modified first representation 1210′ of thecontent item into a second content container, for example by draggingthe image, a proportionally sized second representation 1210″ of theoriginal content item is displayed in a predetermined initial displaysubregion of a second content container 1205 b. The modified secondrepresentation 1210″ reflects the modifications to the firstrepresentation resulting from the user's commands during construction ofthe website. For example, as shown in FIG. 12C, in response to a usercommand to place the resized cat image into the second content container1205 b, a proportionally sized representation 1210″ of the resized catimage, previously displayed in FIG. 12B, is displayed in the secondcontent container 1205 b. In accordance with an aspect, the systemautomatically resizes the image, without introducing distortion such asstretching, so that the resized representation of the image 1210″ willbe contained within the boundaries of the second content container 1205b. As will be understood by those skilled in the art, such imageresizing is typically effected by a resampling algorithm run against thefirst image representation 1210′ that reflects the earlier imagemanipulations by the user. According to aspects of the presentdisclosure, the first and second representations of the content item,i.e., the cat images 1210′, 1210″ displayed in FIGS. 12B and 12C,respectively, are displayed relative to the original content item 1210and no adjustments from user manipulations affect the original contentitem. As will be understood, the manipulation to the firstrepresentation of the content item was a resizing but could include azoom, crop, or other manipulation, as desired by the user inconstruction of the website.

Undo/Redo Architecture

FIG. 13, consisting of FIGS. 13A-13F, illustrates aspects of multiplelevels of undo and redo operations on a developmental website. Incontrast to conventional undo and redo operations provided to computersystem users, aspects of the disclosed invention(s) allow users topreserve an opportunity for an undo or redo operation based onexpiration of a timer, in addition to conducting a session comprising asaved undo/redo stack.

As will be understood by those skilled in the art, current userinterfaces for computer systems that involve the creation and editing ofcontent allow the user to “undo” certain types of operations of contentcreation or editing, and also to “redo” certain “undone” operations,within limits. Typically, user operations that are capable of “undo” or“redo” are of specific predetermined types, for example the insertion ofa string of text delimited by spaces, or the selection and movement of apredetermined string of text such as a paragraph or sentence, ormanipulation of the colors in an image, or the resizing of an image,etc. A discussion of the types of operations that are undoable orredoable is beyond the scope of this disclosure, but are available topersons skilled in the art.

Typically, undo and redo operations are delimited by specific actions,and each action is pushed onto an undo stack, which it typically a knowntype of data structure arranged for “first in-first out” (FIFO)operations). The preferred data structure comprises data identifying theparticular computer operation, content and other parameters involved inthe operation, and location information typically relative to prioroperation. In order to conduct an undo operation, the user selects anundo command, which pops the last undoable operation from the stack, andthe data contained in the popped stack entry is used to reverse theoperation and revert the display of information to a state that existedbefore the undo operation. Such push/pop stack architectures forundo/redo management are known in the art. Aspects of the presentdisclosure provide a different type of undo/redo architecture.Conventional undo/redo operations can be cumbersome when a series ofindividual operations needs to be redone by repetitive undo invocations.In contrast to conventional undo/redo operations, a timer identifiessequences of operations grouped together as a single undo/redoinvocation, such as a sequence of keystrokes of a single word. Thus, alogically cohesive action that required several related input operationscan be undone with a single command, and need not be stepped through inreverse order for each individual step or keystroke.

Referring now to FIG. 13, and in particular FIG. 13A is a screenshot ofan exemplary developmental website workspace region 415 displayingvarious content containers 1305 a, 1305 b, 1305 c for user insertion andediting of content items. As shown in FIG. 13A, no content items havebeen added to the content containers 1305. According to the presentaspect described, a data structure (not shown) is provided for storinginformation corresponding to the execution of website constructionand/or editing operations by the user.

In this context, the website development tool inserting undo/redooperations into a website under construction 304 includes the ability toselect a user control 1310 for implementing an undo operation in thewebsite under construction, and providing an ability to, via activationof the user control, reverse previously performed command entries to thewebsite under construction, the previously performed command entriesbased on a timer. The website under construction 304 is responsive tothe activation by reversing the effect of at least one of the previouslyperformed command entries. The undo/redo logic of the constructionmanagement module 122 computes the number of previously performedcommand entries to be reversed based on the timer and a type of thecommand entry. During user input, the management module 122 stores thepreviously performed command entries by aggregating received actions ofthe user 301 based on the timer, such that storing combines a pluralityof the previous actions as a single command entry. The management module122 combines the previous actions following an expiration of apredetermined time, determined based on the combined actions beingperceived as a single command. In the example arrangement, themanagement module 122 stores the received keystrokes as the previousactions, such that the combined actions comprise sequential keystrokes,and in which the sequential keystrokes defining a single command entry.The undo function, as referred to herein, of course includes an undo anda complementary redo function.

As shown in FIG. 13B, in response to a user command to insert a contentitem into the workspace region 415, a text-specific content item 1305 bis displayed in the workspace region, though as will be understood thatthe content item could be image-specific, video-specific, or any othertype of content item for use in constructing a website. In accordancewith the present aspects, the data structure is modified to reflect theinsertion of the content item into the developmental website workspaceregion to allow a user to subsequently remove the content item from theworkspace region.

Upon user selection of the inserted content item for editing, accordingto one aspect, a content editing tracking timer (not shown) for timingpredetermined intervals is activated. In response to expiration of thetimer, the data structure is modified to reflect a current state of thecurrently active content item at the time of expiration. As shown inFIG. 13C, the user is actively editing the text-specific content item1305 b, so as to provide a modified text-specific content item 1305 b′.As the data structure has been modified to reflect changes to thedevelopmental website and store previously captured states ofdevelopment, FIG. 13C also displays an active undo user control 1310indicating the user can undo the edits made to the developmentalwebsite.

According to one aspect, in response to a user undo command, the datastructure is accessed such that the developmental website is updated toreflect a prior state of the content item. For example, FIG. 13Dreflects the edited state of the text-specific content item subsequentto user undo command, such state corresponding to the previousexpiration of the content editing tracking timer and data structuremodification with respect to the state shown in FIG. 13C. As will beseen in FIG. 13D at 1315, the text string “pl” appears instead of theoriginal text string “place” in FIG. 13C, reflecting that the contentediting tracking timer had initiated after the user had typed thecharacters “pl” and expired when the user had completed the word“place.” Thus, FIG. 13D reflects the undoing of the character string“place” to the smaller string “pl”.

As depicted in FIG. 13E, the text-specific content item reflects anedited state subsequent to a second user undo command. Additionally,FIG. 13E displays active undo and redo user controls 1310 to reflect theuser's ability to further undo previous edits or to return to editingstates that existed prior to any undo commands. Specifically, as will beseen in FIG. 13E at 1317, the text string “conve” appears instead of theoriginal text string “convenient” in FIG. 13C, reflecting that thecontent editing tracking timer had initiated after the user had typedthe characters “conve” and expired when the user had completed the word“convenient pl.” Thus, FIG. 13E reflects the undoing of the characterstring “convenient” to the smaller string “conve”.

Finally, FIG. 13F reflects an empty content container 1305 b thatformerly contained a text-specific content item, after a number of undooperations. Only the redo control is active, thus indicating that noediting states existed prior to the current state of empty contentcontainers. However, the user can return to previous editing states thatreflect changes previously made to the currently depicted developmentalwebsite workspace region.

The undo/redo functionality responsive to the undo/redo control 1310implements a data structure for aggregating or grouping the relatedinput actions to provide a grouping of inputs that are likely related asa single input, and thus would be undone as a single operation. In otherwords, the undo/redo logic modifies the granularity of the inputkeystrokes and operations to permit undoing of set of related and/oratomic operations as a single cohesive entity. In the exampleconfiguration, a tree structure identifies sets of the related inputoperations, and the timer is employed to identify breakpoints. Thebreakpoints attempt to identify the logically related steps as a singleentity, and weighs them with the timer input, since older operations aremore likely to be removed as a large group. For example, a user mightimmediately under 1 or two keystrokes as a typo, but after some time ismore likely to remove whole sentences or paragraphs.

AppFeeds/App Module

FIG. 14, consisting of FIGS. 14A-14E, is a series of screenshotsillustrating aspects of a developmental website 400 (FIG. 4) atdifferent points in time to demonstrate the functionality of ablog-specific app feed within a website. As used herein, an “app feed”is an example of an associated computing function, such as the blogcomputing function 125 or a third party computing function or datasource such as an external blogger 130 as shown in FIG. 1. Thefunctionality of an app feed is to provide an automatically updating(i.e. “autoupdate”) content container for a website being constructed byuser. In the example of FIG. 14, a blog entry container 1405 is one formof an associated computing function, that is, a content container forproviding blog entries created by bloggers either via a blog applicationhosted within the system 100 such as at 125 or provided by the externalsource 130.

At a first time, as shown in FIG. 14A, a user has created a new blogentry content container 1405 in the developmental website workspaceregion 415 and has added some a portion of a blog entry (content) 1410to the new blog entry content container 1405.

FIG. 14B shows the finalized blog post 1415 added to the developmentalwebsite workspace region 415, thus replacing the new blog entry contentcontainer 1405 and blog content 1410 previously shown in FIG. 14A.

FIG. 14C displays a separate webpage within the same developmentalwebsite 20 400 displayed in FIGS. 14A and 14B. The developmental websiteworkspace region 415 of the currently selected webpage displays twocontent containers 1305 a and 1305 b (1305 generally) for user insertionand editing of content items. In addition, FIG. 14C shows apredetermined docking region 430, tabs for selection of user-selectablecontrol item groups 1417, and user-selectable controls 435 in thedocking region. The user selectable control 435 for “blog” permit amethod for applying dynamic update functions in a website underconstruction 304 by generating an ability for identifying a remotenetwork entity the configured for delivering content to the websiteunder construction, and associating the delivered content with acontainer 1305 in the website under construction. Typically, the remotenetwork entity is the hosting website for the blog or other remotecontent for which dynamic update is sought. The inserted container 1305is operable for rendering the delivered content via the associatedcontainer.

In the example arrangement, such content includes an app feed to thewebsite under construction 304, such that the app feed provides periodicupdates of revised content from the remote network entity. Duringconstruction, this includes providing the remote network entity with anetwork identity of the website under construction 304, and receiving,based on the provided network identity, periodic updates of content fromthe remote network entity, in which the remote network entity is updatedindependently of the website under construction, as in the case of aremotely sourced blog, discussed further below in FIGS. 14D and 14E.

As shown in FIG. 14D, at a second time subsequent to the first time ofFIG. 14A, the user has selected a user-draggable representation of theblog-specific app feed control item 1420 and dragged it into thedevelopmental website workspace region 1415, as shown by arrow 1420. Itwill be understood that a part of this operation (not separately shown)includes the identification and/or linking to an associated computingfunction 125 or external third party computing function which providesdynamic content, i.e. content that is dynamically updated as provided bythat associated or third party computing function.

Subsequent to the user releasing the blog-specific app feed control item1420 into the content container 1305 b and providing any requiredlinking or associating to the third party computing function or externalcomputing function, and as shown in FIG. 14E, the content container isdynamically updated as shown at 1305 b′ through the functionality of theblog-specific app feed control item 1420 to display a link 1425 to thefinalized blog post 1415 as previously depicted in FIG. 14B. Thoseskilled in the art will understand that the blog entry content container1405 is operative to automatically receive updated 10 blog entries (i.e.updated content) from an associated source such as the associatedcomputing function 125 or third party computing function 130 and therebyprovide automatically updated content (in this case, of a blog) to anend user of the website created by the user of the system 100.

The remote content depicted by the link 1425, such as a URL, generallyscrolls in the container as updated content 1305′, such as from the appfeed delivering information from a social media website, for example. Inthe example arrangement, the dynamic update of 1305 b′ is well suitedsuch that the app feed delivers information from a blog, in which theblog includes chronologically updated revisions based on input from aremote user base, however other sources and remote network entities maybe employed. Accordingly, the dynamic update provided by the controlitem 1420 generates code for identifying the remote network entity,establishing a network connection for transmitting the content.

Although FIGS. 14A-14E illustrate the functionality of a blog-specificapp feed, as will be understood, app feeds are not limited to blogcontent and can be utilized to dynamically add various other types ofcontent from sources external to a specific webpage.

Automatic Theme Change Adjustment

FIG. 15, consisting of FIGS. 15A-15C, illustrates aspects ofmodification of a developmental website generated in a particularaesthetic theme, by change from a first theme to a second and differenttheme, and the automatic adjustment of the website under construction inresponse to such a theme change. FIG. 15 provides a sequence of screenshots that illustrate the manner in which characteristics of adevelopmental website change in response to a change of themes.

FIG. 15A is a screenshot of a developmental website workspace region 415displaying a plurality of preconfigured user-selectable websiteaesthetic themes in a theme selection region 1505, which is displayed toenable user selection upon provision of a predetermined theme selectioncommand (not shown). A user interacting with the system and creating adevelopmental website may select one of the plurality of themes from thetheme selection region 1505 to provide certain aesthetic treatments tothe website. Such aesthetic treatments include selection of variouscharacteristics of display of content items, arrangements of items,special embellishments, and other characteristics that aretheme-specific. In accordance with an aspect, certain characteristics ofthe website under construction that are theme-specific are automaticallymodified or adjusted in response to a user's change from a first themeto a different second theme.

According to one aspect and as will be understood by those skilled inthe art, website aesthetic themes comprise predetermined layoutscomprising at least one layout region having predefined boundaries forconfining website construction content items. As described elsewhereherein, website construction items are of various types including atitle region 1510, a navigation bar or content item selection controlsregion 1512, an image container 1515, a text container 1517, etc. (suchitems provided by way of illustration and not of limitation). Some orall these content containers may contain theme-specific characteristics,for example, a particular theme, may provide title text in the titleregion 1510 in a predetermined font, font size, and font color, with apredetermined color for the banner that contains the title. Similarly, aparticular theme, may provide text in the navigation bar region 1510 ina predetermined font, font size, and font color, with a predeterminedcolor for the banner that contains the navigation bar, preferably in aconsistent style and color with that of the title region 1510, as hasbeen preselected by a system operator via a template (not shown).Similarly, a particular theme may include an embellishment (image,texture, etc.) such as the ivy background image 1519 shown in FIG. 15A.

As will thus be understood, website aesthetic themes comprise one ormore predetermined theme-specific characteristics including predefinedfonts, predefined color schemes comprising a plurality of complementarycolors, particular embellishments such a image overlays and decorativeimages, and various other characteristics. For example, FIG. 15B showsan exemplary embodiment of a developmental website provided in thedevelopmental website workspace region 415 after user selection of aparticular first website aesthetic theme that comprises a selection ofpredetermined content items, preconfigured to the selected theme. InFIG. 15B, the selected theme comprises a predetermined layout withpredefined layout regions 1520, an example of a theme specificbackground texture 1522, and an exemplary theme-specific characteristicssuch as decorative leaves (also known as an embellishment). Thepredefined layout displayed in FIG. 15B comprises three predefinedlayout regions including a layout region comprising a text-specificwebsite construction content item.

In the website development tool, the method of providing a theme to awebsite under construction 304 therefore includes the ability to applyan initial theme to the website under construction 400, such that thetheme defines aesthetic characteristics on each page of the websiteunder construction 400. The theme is based aesthetic characteristicshaving a consistency throughout the pages of the website underconstruction 304. During website construction, the system 120 receivesan indication of a new theme selection for the website underconstruction, and automatically applying the aesthetic characteristicscorresponding to the new theme to each webpage in the website underconstruction.

Such themes define aesthetic characteristics including, but not limitedto, color, layout, and arrangement of containers for displaying content,the aesthetic characteristics independent of available control functionsand rendered media content. Additionally, themes may also include layoutregions 1520 responsive to types of containers, discussed further below.The aesthetic features are applied without disrupting the functionsprovided by rendered control items on the pages of the website underconstruction. The themes extent to the entire website 304, thus applythe new theme retroactively to previous modifications to the pages 314of the website under construction 304.

The website under construction 304 may include layout regionscorresponding to specific display areas rendering content of aparticular type, generally denoted by a container 150 responsive to amodule 435, such that he applied aesthetic characteristics are common toeach of the layout regions of the website under construction 400. Theselected theme associates each of the layout regions, or containers 150,with a content item, such that the content item defines the source ofthe rendered content and user controls applicable to the renderedcontent. For example, a particular theme, in addition to specifying afont and background color, might define a layout having a titlecontainer across the top of the screen, a text container on the leftbelow the title, and an image container on the right below the title.

As shown in FIG. 15C, and according to an aspect of the presentdisclosure, in response to user selection of a second theme to replacethe first theme, a modified developmental website is generated anddisplayed by the system that reflects an automatic change of anytheme-specific characteristics from the properties of the components ofthe first theme, to corresponding changed properties for the componentsin the second theme. For example, the second theme in FIG. 15C comprisesa changed predetermined arrangement of website components possessingtheme-specific characteristics associated with the second theme. Anywebsite components and/or website construction content items that havetheme-specific characteristics are automatically updated to reflect thechange from the first theme to the second theme.

For example, FIG. 15C displays the same content items as shown in FIG.15B, i.e. website construction content items such as images and text,adjusted if necessary to reflect effecting of the second theme.Specifically, FIG. 15C shows the same cat, car, and text in thepredefined layout regions, though such regions are now provided in adifferent spatial configuration than those displayed in FIG. 15B. Thedevelopmental website is updated, however, to display new theme-specificcharacteristics such as shooting stars and paint splotches asembellishment, and with a different font for the title region andnavigation bar or region. As will be understood by those skilled in theart, theme-specific characteristics can include images of leaves,shooting stars, paint splotches, or a multitude of othercharacteristics.

General Overview of System and Processes

The underlying structure of a web development platform constructed inaccordance with the present disclosure comprises two components: a frontend (i.e., the user's browser, the client) and back end (i.e.,network-accessible servers). The web development platform also comprisesvarious data structures. When a data structure is created on the frontend, a similar though not identical data structure is created on theback end. Each data structure has its own ID, and in addition to variousother information, the data structure IDs are stored in a databasemaintained by a system operator.

The various types of data structures include site, page, region, tree,and module. A site data structure has a site ID at the top level andalso includes theme IDs and page IDs. The theme ID includes specificlayout information as well as certain customizable variables such astext and color. Theme overrides to the customizable variables occur atthe site level. For example, if the theme text color is red and the userwould rather use blue text, that override occurs at the site level. PageIDs include layout IDs as well as many tree and region IDs.

Trees fill out a page's regions, and typically they comprise a list ofmodules and have module IDs. In essence, a particular tree has a pointerto the appropriate modules it comprises. Though trees typically comprisea list of modules, if a user adds a column to the middle of the moduleat the top of the list, the tree will become module/column/module withother modules lower down on the list. The newly inserted column willalso comprise modules.

Modules comprise module types as well as user-customizable modules.Taking the example of an image module, the module type describes theactual image module and provides metaclata about the image module andwhere all the assets for the module are located. The user-customizablemodule, which comprises the user's data for a particular module,includes the image's URL, the crop dimensions, etc.

Description of General System Process

The following process or method steps are implemented in a computersystem that effects provision of a developmental website andconstruction thereof by a user:

1) Associate registered user with default theme and page(s). When userssign up for a site, they are assigned a theme and they receive a page orpages for constructing their website.

2) Retrieve pre-stored information for trees and associated modules forthe regions associated to the theme. The user's first step is to go intothe development platform. To allow the user to construct thedevelopmental webpages on the development platform, the server renders adevelopmental webpage containing the theme information and placeholdersfor the associated regions. On the client side, the client asks theserver for the trees that correspond to those regions associated to thetheme.

3) Check to see if the module already exists within the developmentalwebpage. Prior to querying the server for the assets associated to aparticular module, the system checks to see if the same module alreadyexists within the website thus making the assets locally available.

4) If module is locally available, make a copy of the pre-existingassets,

5) If the module is not locally available, retrieve appropriate assetsassociated to the module from web server. Some of these assets are infiles while others are in the database. The system reaches out andfetches all the necessary assets for each module. The assets are CSS,Javascript, html, and images required for the modules.

6) Assemble pre-stored information for trees and associated modules forthe regions associated to the theme in conjunction with pre-storedinformation for the assets and the assets themselves. As an example, anasset would be an image. Prestored information for the asset would bethe image's URL.

7) Display pre-stored information for trees and associated modules forthe regions associated to the theme through the client, i.e., browser,to the user. Prior to this step, the entire development platform isblank. Therefore, the web browser recursively builds out the trees. Thebrowser walks down each tree and builds out each modules is comprises.

8) Receive user's indication of editing action to developmental webpage.This step occurs when the user edits a particular page within thedevelopmental website.

9) Check module coordinates while a user is dragging a module onto thedevelopmental webpage and if module is on a droppable, i.e., usable,space, display an indicator. In this case, the indicator is a blue lineor box that shows where the module will be inserted if the user releasesthe mouse and drops the module into the developmental website.

10) Manipulate the tree into which the module was dropped after the userinserts the module into the developmental website.

11) Repeat steps 3 through 5.

12) Render the module in the proper location.

13) Associate user interactions, i.e., edits, with modules by having themodule mark itself as dirty

14) Every two seconds (or other predetermined interval), go through eachtree and check to see if the tree is dirty (i.e., whether it has beenaltered); additionally, check for dirty modules.

15) If any trees or modules are dirty, save them in the save queue.

16) Mark saved items as clean.

17) Duplicate the module's data structure in the browser to thedatabase. Modules have a similar data structure in the browser and inthe database so that changes in the browser can be monitored and thensaved in the database.

18) Receive user's indication to publish the developmental website.

19) Duplicate the majority of the modules including the published pageand site modules.

20) Bundle up all the modules into the tree and then bundle up all ofthe trees for the page into the published page module. In essence, asnapshot of the site at that particular moment is being stored. When aninternet browser goes to view the site, they will see this snapshot.

Additional Process Notations

Module resizing: When a user moves a module into a new space that thatrequires more or less space, the module dynamically refits itself intothe new space.

Editing a module: Each module expresses/exposes its own controls. Imagemodules expose controls for modifying an image, and text modules exposestext editing features. However, modules can utilize common controls fromwithin the platform such as toolbars or dialog windows. Each module typeis responsible for its own editing functionality.

Undo/redo: Trees are responsible for marking themselves as dirty, and atree will only be marked dirty if its structure has changed. Changes tothe structure include column resizing, module insertion and deletion, orcolumn insertion and deletion. Trees are not marked dirty when a useredits a module within the tree. For example, if a user edits an image,the tree containing that image module is not marked dirty because thetree's structure did not change. In this particular case, the modulewould be dirty.

Trees have pointers to modules, and the module has the module ID as wellas the content for the module. The content for the module can include amap or a JSON object of any type of content the module wants to expose.In the case of an image, the stored information would include a URL IDas well as panning and cropping percentages, which are fields in adatabase entry (i.e., records in the database).

The database is updated at the end of the predetermined interval only ifsomething has been changed. Any time a tree is manipulated, e.g., amodule is added/removed/resized or a column is added/resized, that themethod for both doing and undoing the operation is pushed onto the undostack. When the user selects undo, the “how the manipulation can beundone” portion is retrieved. When the user selects redo, the “how itwas done” portion is retrieved.

Modules utilize the same stack, but rather than pushing out an undo or aredo as with the tree, they simply push out a snapshot of the moduledata as it existed at the expiration of the previous tracking timer. Ifa user selects undo and the previous operation was a module operation,the system will describe the snapshot and rerender based on thatsnapshot.

Layouts: Upon receiving a user's indication to select a new layout, thedialog box displaying the layout options is displayed, and the currentlayout is highlighted. Upon receiving user's selection of a new layout,the layout is changed in the page model and the system then determineswhich regions are new and which regions are no longer there relative tothe previous model. For example, if a user goes from a layout thatcomprises a header and a body to a layout that comprises a header, body,and sidebar, the sidebar is new so an empty tree is created andassociated with the new sidebar region. On the other hand, if the userhad gone the other way and the sidebar had gotten dropped, the treeremains and is still associated with a sidebar, but when the page isrendered the sidebar will not be displayed as the selected layout doesnot require a sidebar.

All modules are likewise updated to have the proper horizontal dimensionbased on the new layout. Each tree is recursively evaluated in order torecalculate the appropriate widths for the modules and columnsassociated with the tree. Module and column widths are stored aspercentages, and these percentages are used as the basis for the for thewidth calculations.

Themes: When a user navigates to the “theme picker”, a preview of thedevelopmental website utilizing that theme is rendered and displayed. Ifthe user selects a different theme, a new preview is rendered anddisplayed. When the user actually selects a theme to use in thedevelopmental website, the theme ID is modified in the site datastructure. Further, once a user selects a particular them, the systemchecks to see if the layout from the previous theme still exists. If itdoes not, the system utilizes a heuristic to choose the next closestlayout and refit the content accordingly.

Image Manipulation

The method for displaying the user controls associated with manipulatingimages in the developmental website is implemented in HTML, CSS, andJavascript. Resize controls positioned on the corners of an image allowa user to resize an image. Crop controls positioned on the edges of animage allow a user to crop an image. Zoom controls are positioned belowthe image and allow a user to enlarge or shrink an image.

The image HTML element is contained within another HTML elementreferenced herein as the “crop container”. The crop container is set to“overflow: hidden” in CSS. This setting ensures that even if the imageextends beyond the crop container boundaries, the image will be clippedor cropped such that it will appear confined to the crop container. Theimage within the crop container maintains it's original aspect ratiothroughout all user interactions.

Referring to FIG. 8C and FIG. 9B, when a user clicks and drags a cropcontrol handle (822 a, 822 c, 822 e) from an edge of the image (left,right, top, or bottom), the crop container is resized accordingly. Theimage size within the crop container does not change. There can be aminimum width and height beyond which a user is unable to further cropthe image. If a user drags a crop control handle beyond the bounds ofthe contained image, the user can “pull” more of the image from theopposite end of the crop container by adjusting the X or Y position ofthe image element. When there is no more image to pull from either edge,the user is no longer able to pull from those edges (so as to avoidwhite space between the edge of the crop.

A subsequent implementation could incorporate image zoom that wouldallow a user to drag the crop handle even further. When the user reachesthe boundary of both the current edge they are dragging and the oppositeedge, the contained image would grow accordingly in both width andheight and continue filling the containing crop container element.

The resize handles (822 b, 822 d) are located on the corners of the cropcontainer. When a user drags a resize handle, the width and height ofthe image element are increased or decreased (depending on the directionof the drag) in proportion to the image's original aspect ratio. Thewidth and height of the crop container are concurrently increased ordecreased by the same amount as the image elements. The result is thatthe display shows the same area of the image, but the cropped imageappears larger. As with cropping, there can be a minimum width andheight such that the user is unable to resize beyond those thresholds.The maximum width and height can also be restricted. In the presentapplication, the dimensions are limited such that the image elementcannot be stretched beyond the original width or height of the sourceimage.

When a user pans the image by dragging the actual image element withinthe crop container, the image element's X and Y position are changedaccordingly. The user is unable to pan the image such that there wouldbe white-space between the edge of the image and the edge of the cropcontainer.

When a user zooms in or out on an image using the zoom control 820 (seeFIG. 8C or FIG. 9B), the system selects a focal point to zoom into andallows the user to zoom in and out at that point. Typically, the focalpoint is the center of the image's viewable 20, area, but it does nothave to be. When the user zooms out, the system decreases the imageelement's width and height. On the other had, when the user zooms in,the system increases the image element's width and height. Further, thesystem adjusts the X and Y position of the image element accordingly toensure that the zoom in or out is from the center of the image. Zoomingis restricted such that the image element's width and height will neverincrease beyond the source image's original width and height. Zooming isalso restricted such that the image element will not be so small that itleaves white space between the edges of the image element and the cropcontainer.

Each of the controls discussed above can be shown, hidden, and/orenabled/disabled in any combination. For example, the system could beconfigured to allow a pre-defined space for an image which would allowpanning and zooming but not cropping or resizing.

Dock and Ghosting

The developmental website is contained within an Iframe HTML element onan HTML page. The outer HTML page will be referenced herein as the“chrome page” and the inner Iframe page will be referenced as the “innerpage”. The dock HTML elements are positioned on the chrome page suchthat they overlap the bottom of the Iframe that contains thedevelopmental website. The dock HTML elements are styled using CSS suchthat the background is transparent and any space not occupied by thedock itself or the items on the dock is transparent, thus allowing auser to see more of the developmental website behind the dock elements.

Each dock item on the dock is a collection of HTML elements containedwithin an HTML element referenced herein as the “dock item container”.When a user drags a dock item off of the dock, the system hides the dockitem container from the user via CSS by setting “display: none”.Additionally, the system creates a “ghost” HTML element, which is arepresentation of the selected dock item, that follows the user's mousemovements. The “ghost” element is visually identical to the itemselected from the dock with some transparency added to aid usability;however, the ghost can be visually different if necessary.

When a user drags an item off the dock, the other dock items arepositioned lower such that they appear to sink into the dock. Thiseffect is achieved by setting a higher top position on the HTML elementthat contains all of the dock items. When the drag action is complete,either successfully or unsuccessfully, the dock items appear to slideback up to their original position. This effect is achieved by setting alower top position in CSS on the HTML element that contains all of thedock items. The same effect could also be achieved with margins orbottom positions instead of top positions if necessary. The system usesan animation rather than having the position jump instantaneously tosmooth this visual process of the transition.

There are two potential outcomes to a user drag operation. If thedrag/drop was successful, the user dropped the element over anacceptable point in the developmental website. If the drag wasunsuccessful, the user dropped the element over an unacceptable point inthe developmental website. In the case of a successful drop, the ghostelement disappears or optionally animates to show that it was “dropped”into the proper place on the developmental website. The ghost element isthen removed and the original dock item container is displayed in itsoriginal location on the dock. In the case of an unsuccessful drop, theghost element animates back toward its original location on the dock,which now appears to be empty. Once the ghost is in place, the dock itemcontainer is again displayed with the ghost element removed.

Page Navigation Links (Content Item Selection Controls)

Referring to FIG. 11, each of the navigation links (e.g., 1105 a, 1105b, 1105 c, 1105 d) of the website (including the developmental website)is a collection of HTML elements contained within an LI (list item) HTMLelement. Each of the LI elements are contained within a UL (unorderedlist) HTML element (or another valid HTML element that may contain LIelements). The complete navigation UL containing all navigation linksmay appear zero or more times on any given page of the website.

The platform also supports subnavigation wherein particular navigationlinks can be “nested” beneath other navigation links. In this case, the“nested” navigation links are placed in another UL HTML element that iscontained within the parent link's LI element. This “nesting” cancontinue as many times as the system allows. Currently, the systemallows a maximum depth of three, which means first-level navigationlinks at the top-level, second-level navigation links within thefirst-level, and third-level navigation links within the second-level.

The depth of navigation displayed to a user is dependent on the theme.Each theme uses CSS and/or JavaScript to hide or display each depth ofnavigation. For example, themes may be configured to hide anything belowtop-level navigation and only display the second-level links beneaththat navigation item when the user hovers their mouse pointer (or otherpointing device such as a finger-based gesture on a mobile device) overthe corresponding first-level navigation item.

Each theme also may define whether or not the navigation LI elements areable to wrap vertically. For example, some themes support a wrappedscheme where navigation links are displayed in multiple rows. Otherthemes may support a scheme wherein navigation links are displayedvertically such that each row contains exactly one navigation link. If ascheme is configured such that navigation links are not able to wrap, itis possible that certain links would not fit in the allowable area andwould otherwise extend beyond the containing HTML element. In suchcases, the system uses JavaScript to perform a series of steps toprevent the user from noticing the navigation link wrapping. The processis as follows:

1) If the top-level navigation UL element's width is greater than thewidth of it's parent HTML element, add a navigation item with adescriptive label, e.g., “More” (1115), and create a UL within saidnavigation item to contain any excess navigation items and then proceedto 3A; otherwise go to step 2.

2) If the last navigation link LI element's Y position is greater thanthe first navigation link LI element's Y position on the page, add anavigation item with a descriptive label, e.g., “More”, and create a ULwithin said navigation item to contain any excess navigation items andthen proceed to 3B; otherwise, stop.

3A) Loop through all navigation link LI elements, beginning with thefirst. If the top-level navigation element's width is greater than thewidth of it's parent HTML element, move the current navigation link tothe beginning of the UL within the “More” navigation item; repeat thisstep as necessary.

3B) Loop through all navigation link LI elements, beginning with thelast. If the current element's Y position is greater than the Y positionof the first navigation link LI element, move the current navigationlink to the beginning of the UL within the “More” navigation item;repeat this step as necessary.

Included below for reference is the JavaScript code described in processsteps 1-3B for page navigation links as described above:

* * * * * (begin code) function(jQuery){ if(typeof(jQuery) ===‘undefined’) jQuery = $; $ = jQuery;if($(‘body’).hasClass(‘webs-allow-nav-wrap’)) return false;$(‘ul.webs-nav’).each(function( ){ var nav = $(this), items =nav.children(‘li’); if(!items.length > 0 || (items.css(‘display’) ==‘block’ && items.first( ).css(‘float’) == ‘none’)) return false; varfirstX = items.eq(0).position( ).left, top = items.eq(0).position().top + Math.min(items.eq(0).height( ), 10), addMore = function( ){ varmore = $(‘<li class=“webs-5 nav-more has-children”><a href=“#”onclick=“return false; “><span class=“title”>More</span><spanclass=“after”></span></a><ul></ul></li>‘); nav.append(more); returnmore.find(‘ul’); }, addToMore = function(item, test){ var item =items.eq(i); if(!item.hasClass(‘webs home’)) { // Never put “Home” inthe more dropdown if(test(item)) { var lvl3item = item.find(‘ul ul’); //Themes can’t support the extra level, so move lvl3 up into lvl2if(lvl3item.length > 0) lvlSitem.children(‘li’).prependTo(lvl3item.parents(‘ul’)); item.prependTo(more); return true; } return false; } };var maxWidth = nav.parent( ).width( ); if(nav.width( ) > maxWidth) { //Nav overflows var more = addMore( ); for(var i=items.length−1;nav.width( ) > maxWidth && i>1;i−−) { 5 addToMore(items.eq(i),function( ){return true;}); } } else if(items.eq(items.length−1).position( ).top > top) { // Nav wraps var more = addMore( ); varkeepgoing = true; for(var i=items.length−1; i>1;i−−) { var item =items.eq(i); keepgoing = false; if(addToMore(item, function( ){ returnnav.position( ).top > top; })) { } else { break; } } } }); } (endcode) * * * * *Content (e.g. Image) ResizingEach module (“content container”) within a developmental website mayinclude code associated with it that is invoked when the width of amodule's containing element (“content container”) increases. The widthof the containing element car occur either by direct user interaction(e.g., if the user resizes the column containing the module) or bychanges to the webpage's layout or theme. Since layout regions maychange width in different layouts and themes, it is necessary to refitall modules upon user selection of a new theme or layout. In order toaccomplish this resizing, modules may include code for augmenting data.For example, a module may include code wherein the module's data isaugmented in response to an augmenting of the width of the containingelement. For more generic modules that do not include such dataaugmenting code, default code is implemented to augment the data. Forexample, in the case of an image module, the code determines if thecontaining width is greater than or equal to the current width plus thewidth of any surrounding frame. If the containing width is greater, thesystem does nothing. If the containing width is less, the system setsthe width of the image to the containing width minus the width of anysurrounding frame. In addition, the system accordingly sets the heightsuch that the aspect ratio of the image is unchanged.

Those skilled in the art should readily appreciate that the programs andmethods defined herein are deliverable to a user processing andrendering device in many forms, including but not limited to a)information permanently stored on non-writeable storage media such asROM devices, b) information alterably stored on writeable non-transitorystorage media such as floppy disks, magnetic tapes, CDs, RAM devices,and other magnetic and optical media, or c) information conveyed to acomputer through communication media, as in an electronic network suchas the Internet or telephone modem lines. The operations and methods maybe implemented in a software executable object or as a set of encodedinstructions for execution by a processor responsive to theinstructions. Alternatively, the operations and methods disclosed hereinmay be embodied in whole or in part using hardware components, such asApplication Specific Integrated Circuits (ASICs), Field ProgrammableGate Arrays (FPGAs), state machines, controllers or other hardwarecomponents or devices, or a combination of hardware, software, andfirmware components.

The foregoing description of the exemplary embodiments has beenpresented only for the purposes of illustration and description and isnot intended to be exhaustive or to limit the inventions to the preciseforms disclosed. Many modifications and variations are possible in lightof the above teaching.

The embodiments were chosen and described in order to explain theprinciples of the inventions and their practical application so as toenable others skilled in the art to utilize the inventions and variousembodiments and with various modifications as are suited to theparticular use contemplated. Alternative embodiments will becomeapparent to those skilled in the art to which the present inventionspertain without departing from their spirit and scope. Accordingly, thescope of the present inventions is defined by the appended claims ratherthan the foregoing description and the exemplary embodiments describedtherein.

1. In a website development system, a method for receiving designinformation for website user controls comprising: receiving a pluralityof requests for additional content pages; and generating, for each ofthe additional content pages, a content item selection control, thecontent item selection controls having a first type and a second type,the first type adapted to be rendered for a visually appealing number ofthe first type, and the second type adapted for successive content itemselection controls not rendered as the first type, each of the firsttype and the second type corresponding to one of the plurality ofcontent pages and responsive for selection of the corresponding contentpage.
 2. The method of claim 1 wherein the visually appealing numberdenotes a linear sequence of content item selection controls, the linearsequence based on a predetermined distance across the screen.
 3. Themethod of claim 2 wherein the first type is adapted for full view of thecontent item selection control, and the second type is adapted for asummary view, the summary view selectively displaying the content itemselection control.
 4. The method of claim 2 wherein the second type isadapted for a pulldown view, the pulldown view responsive to activationfrom a pointing device, activation rendering a series of the contentitem selection controls of the second type.
 5. The method of claim 4wherein the linear sequence of the first type extends in a substantiallyorthogonal direction from the series of the second type
 6. The method ofclaim 5 further comprising calculating the predetermined distance basedon the size of the rendering of the first type of the content itemselection controls and on an available display area.
 7. A method ofdefining a control structure in a website under construction comprising:displaying an initial content item selection control (e.g. home pagetab) in the viewable display region in a content item selection controlregion having a predetermined maximum horizontal dimension; providing aplurality of user selectable themes corresponding to various aesthetictheme-specific display properties including color, texture, font, fontsize, and images; in response to a user command to include a new page tothe developmental website, generating a page container for receivinguser-added content for the new page and generating a subsequent contentitem selection control corresponding to the new page; displaying thesubsequent content item selection control within the content itemselection control region; repeating the steps above of including a newpage and subsequent content item selection control in response tofurther user commands for subsequent new page additions; and in responseto detection that a user command for including a new page and subsequentcontent item selection control has exceeded the predetermined maximumhorizontal dimension of the content item selection control region,automatically generating a second type of content item selection controlwithin the content item selection control region, the second type ofcontent item selection control containing additional informationrelating to one or more of the content item selection controls thatcannot be displayed within the content item selection control region. 8.The method of claim 7, further comprising receiving subsequent commandsfor including a new page, and applying the same theme specific displayproperties to the new page.
 9. The method of claim 7 wherein in responseto a user control that affects a theme-specific display property thataffects display of the content item selection controls in the contentitem selection control region, automatically adjusting the display ofthe content item selection controls and the second type of content itemselection control so as to accommodate the change.
 10. The method ofclaim 7 further comprising identifying an initial predetermined spatialarrangement of the content item selection controls (tabs), themespecific, each theme providing a particular predetermined spatialarrangement of content item selection controls.
 11. The method of claim7, wherein each content item selection control comprises predetermineddimensions and theme-specific characteristics, the theme-specificcharacteristics indicative of fonts, colors and background patternscommon to each of the pages.
 12. The method of claim 7 wherein thesecond type of content item selection control comprises a drop downmenu.
 13. A website development device for generating a website based oncommands from a remote user, comprising: an interface to a public accessnetwork for receiving design information for website user controls, theinterface adapted to receive a plurality of requests for additionalcontent pages of a website under construction; and a construction modulefor generating, for each of the additional content pages, a content itemselection control, the content item selection controls having a firsttype and a second type, a hosting module for rendering the content itemselection controls, the first type adapted to be rendered for a visuallyappealing number of the first type, and the second type adapted forsuccessive content item selection controls not rendered as the firsttype, each of the first type and the second type corresponding to one ofthe plurality of content pages and responsive for selection of thecorresponding content page, the interface responsive to a remote usercomputer via the network.
 14. A computer program product includinginstructions encoded on a non-transitory computer readable storagemedium that, when executed by a processor, perform a method of websiteconstruction comprising: receiving, by the processor, a plurality ofrequests for additional content pages; and generating, for each of theadditional content pages, a content item selection control, the contentitem selection controls having a first type and a second type, the firsttype adapted to be rendered for a visually appealing number of the firsttype, and the second type adapted for successive content item selectioncontrols not rendered as the first type, each of the first type and thesecond type corresponding to one of the plurality of content pages andresponsive for selection of the corresponding content page.
 15. Themethod of claim 14 wherein the visually appealing number denotes alinear sequence of content item selection controls, the linear sequencebased on a predetermined distance across the screen.
 16. The method ofclaim 15 wherein the first type is adapted for full view of the contentitem selection control, and the second type is adapted for a summaryview, the summary view selectively displaying the content item selectioncontrol.
 17. The method of claim 15 wherein the second type is adaptedfor a pulldown view, the pulldown view responsive to activation from apointing device, activation rendering a series of the content itemselection controls of the second type.
 18. The method of claim 17wherein the linear sequence of the first type extends in a substantiallyorthogonal direction from the series of the second type.
 19. The methodof claim 18 further comprising calculating the predetermined distancebased on the size of the rendering of the first type of the content itemselection controls and on an available display area.